webpack3 打包
1. 基于 webpack 3.0
2.步骤、说明
2.1 webpack 本地初始化、安装基本包
npm init 》 package.json
npm i webpack@3.10.0 vue@2.5.13 vue-loader@13.6.0 》 安装webpack和vue,使用vue要安装vue-loader
npm i css-loader@0.28.7 vue-template-compiler@2.5.13 》 根据终端WARN提示安装css-loader,因为vue-loader依赖css-loader
2.2 package.json 配置本项目启动快捷键 build (npm run build)及 本项目启动配置优于全局
scripts 脚本对象增加配置属性:
2.3 新建 项目文件 webpack.config.js 文件 处理对应文件及其对应 loader 规则
const path = require('path'); module.exports = {
entry: path.join(__dirname,'src/index.js'),
output:{
filename:'build.js',
path: path.join(__dirname,'dist')
},
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader'
} ]
}
}
2.3.1 打包多个 js
2.4 打包其他静态资源
npm i style-loader@0.19.1 url-loader@0.6.2 file-loader@1.1.6 》 url-loader file-loader 处理图片 》style-loader 处理成内联 css (往上抛的处理顺序)
npm i stylus-loader@3.0.1 stylus@0.54.5 》 处理 styl 后缀样式表
webpack.config.js
const path = require('path'); module.exports = {
entry: path.join(__dirname, 'src/index.js'),
output: {
filename: 'build.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader'
}, {
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.styl$/,
use: [
'style-loader',
'css-loader',
'stylus-loader'
]
},
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 1024,
name: '[name]-aaa.[ext]'
}
}]
} ]
}
}
index.js
import Vue from 'vue'
import App from './app.vue'
import './assets/images/bg.png'
import './assets/styles/test.css'
import './assets/styles/footer.styl' const root=document.createElement('div')
document.body.appendChild(root); new Vue({
render: h => h(App)
}).$mount(root)
2.5 webpack-dev-server
npm i webpack-dev-server@2.9.1 》 搭建 web 服务器 开发环境 ( 热加载之类 )
npm i cross-env@5.1.3 》根据一个环境变量判断,来判断是开发环境还是正式环境 NODE_ENV就是这个环境变量 解决这种跨平台设置的差异性,我们可以安装cross-env
npm i html-webpack-plugin@2.30.1 》 将我们打包好后的js融入到我们的HTml中去
关键代码
webpack.config.js
const path = require('path');
const webpack = require("webpack")
const HTMLPlugin = require('html-webpack-plugin') //判断是否为测试环境,在启动脚本时设置的环境变量都是存在于process.env这个对象里面的
const isDev = process.env.NODE_ENV === "development" const config ={
target:'web',
entry: path.join(__dirname, 'src/index.js'),
output: {
filename: 'build.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader'
}, {
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.styl$/,
use: [
'style-loader',
'css-loader',
'stylus-loader'
]
},
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 1024,
name: '[name]-aaa.[ext]'
}
}]
} ]
},
plugins:[
new webpack.DefinePlugin({ //主要作用是在此处可以根据isdev配置process.env,一是可以在js代码中可以获取到process.env,
'process.env':{ //二是webpack或则vue等根据process.env如果是development,会给一些特殊的错误提醒等,而这些特殊项在正式环境是不需要的
NODE_ENV: isDev ? '"development"' : '"production"'
}
}),
new HTMLPlugin() //引入HTMLPlugin
] } if(isDev){
config.devtool = '#cheap-module-eval-source-map'
config.devServer = {
// port: 8000,
// host: '127.0.0.1',
port: 8700,
host: '0.0.0.0',
overlay: {
errors: true,
},
// open: true , //项目启动时,会默认帮你打开浏览器
hot: true //在单页面应用开发中,我们修改了代码后是整个页面都刷新,开启hot后,将只刷新对应的组件
},
config.plugins.push( //添加两个插件用于hot:true的配置
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
)
} module.exports = config
package.json
{
"name": "webpack3.0",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"cross-env": "^5.1.3",
"css-loader": "^0.28.7",
"file-loader": "^1.1.6",
"html-webpack-plugin": "^2.30.1",
"style-loader": "^0.19.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"url-loader": "^0.6.2",
"vue": "^2.5.13",
"vue-loader": "^13.6.0",
"vue-template-compiler": "^2.5.13",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.1"
}
}
npm run dev 执行代码 > http://localhost:8700/
2.6 vue 项目实战
3.相关文章
webpack3 打包的更多相关文章
- element-ui和npm、webpack、vue-cli搭建Vue项目
一.element-ui的简单使用 1.安装 1. npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN ...
- vue学习之webpack
本质上,Webpack是一个现代 JavaScript应用程序的静态模块打包器(module bundler).当 Webpack处理应用程序时,它会递归地构建一个依赖关系图(dependency g ...
- webpack的正确安装方式
webpack是基于node开发的模块打包工具,所以他本质上是由node实现的. 我们要保持node版本尽量的新,另一个要保持webpack版本尽量的新,高版本的webpack会利用新版本中的一些特性 ...
- 理解ES6中的Symbol
一.为什么ES6引入Symbol 有时候我们在项目开发的过程中可能会遇到这样的问题,我写了一个对象,而另外的同时则在这个对象里面添加了一个属性或是方法,倘若添加的这个属性或是方法是原本的对象中本来就有 ...
- webpack3配置字体图标和打包相关问题
webpak配置字体图标有两种方式 一.将字体图标和css打包到同一个文件中. 1.首先需要安装url-loader npm install --save-dev url-loader 2.相关配置如 ...
- vue-cli webpack3扩展多模块打包
场景 在实际的项目开发中会出现这样的场景,项目中需要多个模块(单页或者多页应用)配合使用的情况,而vue-cli默认只提供了单入口打包,所以就想到对vue-cli进行扩展 实现 首先得知道webpac ...
- vue-cli项目打包优化(webpack3.0)
1.修改source-map配置:此配置能大大减少打包后文件体积. a.首先修改 /config/index.js 文件: // /config/index.js dev环境:devtool: 'ev ...
- webpack3新特性介绍
6月20号webpack推出了3.0版本,官方也发布了公告.根据公告介绍,webpack团队将未来版本的改动聚焦在社区提出的功能需求,同时将保持一个快速.稳定的发布节奏.本文主要依据公告内容,简单介绍 ...
- webpack3中文版使用参考文档--全面解析webpack.config.js
Webpack目前官方发布的最新版本是3.1.0,相对于2.0的怎么本,在语法上没有变动,只是新增了功能.使用webpack,需要事先安装node.js,并对node.js生态有一些基本的了解,比如( ...
随机推荐
- PriorityQueue源码阅读
最小堆:优先级权重越小 离顶点越近 案例 实现一个top max n publish static int[] topN(int[] nums, int l){ int[] result = new ...
- vue.js环境安装
1.到官网(http://nodejs.cn/download/)下载Node.JS运行环境并安装(由于现在的Node中自带npm包管理器,所以就不需要额外下载npm了) 2.如果是新手,那么建议以引 ...
- leetcode 17电话号码的字母组合
与子集70?类似,子集每次两个分支,本题每次k个分支,子集是第一次不push第二次push元素,本题是每次都push元素,因此,本题答案的长度都为k,子集题目为各种组合: /** res,level, ...
- 浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Document 对象
ylbtech-浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Document 对象 1.返回顶部 1. HTML DOM Document 对象 Docume ...
- SVN 清理失败解决方案
SVN有时因各种不明原因导致清理失败,可以采取如下解决办法进行处理: 方法一: 删除根目录下隐藏文件夹“.svn” 然后在根目录文件夹 外面的空白处 检出.比如你项目文件夹名为“D:/source” ...
- vsftp软件安装部署
1.安装vsftp yum install -y vsftpd db4-utils2.默认可以支持系统用户账号远程登录.不安全,建立虚拟账号体系为好.或者在服务器端对vsftpd.conf配置文件进行 ...
- apache不记录指定类型的访问日志
在虚拟主机配置文件中 添加如下内容使得.gif.png.bmp.js.css.swf,jpg,在指定访问日志后加上env=!image_request !取反即以上内容不显示在日志中. SetEnvI ...
- mesh重叠闪烁问题
我用正交摄像机做了2d游戏,但是导出spine动画文件是个mesh ,在游戏里有时会出现2个Mesh来回切换显示顺序问题,导致闪烁 查了下并没有发现什么解决方案 后面突然发现只要将摄像机的Y轴偏移一点 ...
- 转·c语言函数指针的理解与使用
原文出处:https://www.cnblogs.com/haore147/p/3647262.html 1.函数指针的定义 顾名思义,函数指针就是函数的指针.它是一个指针,指向一个函数.看例子: 1 ...
- Linux ulimit 命令 限制系统用户对 shell 资源的访问
ulimit命令用来限制系统用户对 shell 资源的访问,常见用法如下: [root@MongoDB ~]# ulimit -a // 查看当前所有的资源限制 [root@MongoDB ~]# u ...