webpack@3.6.0，1 -- 快速开始
本篇内容
- 前言
- 配置入口和输出
- 热更新
- loader配置
- js代码压缩
- html的打包与发布
前言
//全局安装
npm install -g webpack（3.6.0）
npm init
//安装到你的项目目录
npm install --save-dev webpack //本地化安装是防止全局的版本冲突，团队配合时也应注意node跟webpack版本的统一性
//在package.json中
"dependencies": {
//生产环境相关依赖 cnpm i -S/--save xxx
},
"devDependencies": {
//开发环境相关依赖 cnpm i -D/--save-dev xxx
}
//另：
cnpm i -g live-server
//使用：
live-server //(直接到开服务器进入项目根目录)
webpack.config.js配置入口和输出
//新建工程主文件夹
md src
echo >> main.js
echo >> index.html
//根目录下配置文件
cd ../
echo >> webpack.config.js
const path=require('path');
module.exports={
entry:{
main:'./src/main.js', //键名决定打包后的名字
main2:'./src/main2.js', //多入口
},
output:{
path:path.resolve(__dirname,'dist'),
filename:'[name].js' //根据入口名字生成相应的文件
},
module:{},
plugins:[],
devServer:{}
}
webpack 即可打包查看结果
热更新（该方式页面会刷新）
cnpm i -D webpack-dev-server（2.8.2）
//配置热更新
devServer:{
contentBase:path.resolve(__dirname,'dist'),
host:'192.168.1.122',
compress:true, //压缩
port:1234
}
//在package.json中
"scripts": {
"server": "webpack-dev-server" //--open直接运行并打开浏览器'webpack-dev-server --open'
},
//运行
npm run server
如果热更新有问题，另加插件
plugins: [
//...
new webpack.HotModuleReplacementPlugin(), //webpack自带
loader配置
如：style-loader css-loader
cnpm i -D style-loader css-loader
// webpack.config.js
module:{
rules:[
{
test:/\.css$/, //要匹配的文件后缀名
loaders:['style-loader','css-loader']
// include/exclude //(需要处理/不需要处理)
}
]
},
//main.js
import css from './css/index.css'; //被打包再js文件中
//运行
npm run server
js代码压缩
const uglify=require('uglifyjs-webpack-plugin');
plugins:[
new uglify()
],
html的打包与发布（在此之前并不能直接生成html文件,在dist中，.js文件也为注入）
cnpm i -D html-webpack-plugin
const htmlPlugin=require('html-webpack-plugin');
plugins:[
// new uglify()
new htmlPlugin({
minify:{ //压缩
removeAttributeQuotes:true //去除标签属性的''
},
hash:true, //防止缓存的影响
template:'./src/index.html'
})
],
//运行
webpack
注意：
cnpm i live-server //注意：与cnpm i -g live-server效果一样
cnpm i --production //只安装生产环境的安装包
