webpack常用配置
安装
npm i -g webpack
默认版本3.5.5
单纯打包js模块（最简单的使用）
目录结构：
进入main.js目录，命令行执行：
main.js:
let a =require('./a.js')
document.getElementById('root').appendChild(a());
import b from './b.js'
alert(b.t)
a.js:
//commonJs模块
console.log('a'+new Date().getTime());
module.exports=function(){
console.log(new Date().getTime());
var div =document.createElement('div');
div.innerHTML='from a';
return div
}
b.js:
//es6模块
console.log('b'+new Date().getTime());
export default {
t:'from b'
}
html:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>demo1</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>
wepack.config.js配置文件配置wepack
其他文件不动，根目录下新建webpack.config.js 如下：
配置文件的关键点：入口以及出口。
module.exports = {
entry: __dirname + "/app/main.js", //唯一入口文件
output: {
path: __dirname + "/public", //打包后的文件存放的地方
filename: "bundle.js" //打包后输出文件的文件名
}
}
根目录下运行：
省去命令行中复杂的配置，webpack命令直接去读取webpack.config.js的配置，然后进行打包。
package.json配置script
目录结构
新增：
npm run start 即为直接命令行输入webpack
代码压缩混淆
在webpack包里面已经自带这个UglifyJsPlugin，我们只要在webpack中的plugins添加即可，代码如下：
var webpack = require('webpack');
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
module.exports = {
entry: __dirname + "/app/main.js", //唯一入口文件
output: {
path: __dirname + "/public", //打包后的文件存放的地方
filename: "bundle.js" //打包后输出文件的文件名
},
plugins: [
new uglifyJsPlugin({
compress: {
warnings: false
},
mangle:{
except:['$super','$','exports','require']
// UglifyJsPlugin可以防止$super, $, exports , require,不会被混淆,设置warnings:false就打包时候即可消除warings报警了
}
})
]
}
以上报错出现在使用common.js模块标准的a.js中，当将其改成es6模块写法后，可以正常打包压缩，猜想UglifyJsPlugin不支持common.js的语法。
以上是具体的配置UglifyJsPlugin的方法，其实webpack本身集成了UglifyJS插件（webpack.optimize.UglifyJsPlugin），其命令webpack -p即表示调用UglifyJS来压缩代码。
即：
配置server
npm install webpack-dev-server
直接运行默认端口8080;即可访问http://localhost:8080/public/index.html
watch代码，代码改变无需再次打包
多入口配置
module.exports = {
entry: {
bundle1: './app/main1.js',//多入口配置
bundle2: './app/main2.js'
},
output: {
path: __dirname + "/public", //打包后的文件存放的地方
filename: "[name].js" //打包后输出文件的文件名
}
}
CSS-loader
新建css文件后目录；
main.js引入css
require('./css.css');
webpack.config.js配置
module.exports = {
entry: __dirname + "/app/main.js", //唯一入口文件
output: {
path: __dirname + "/public", //打包后的文件存放的地方
filename: "bundle.js" //打包后输出文件的文件名
},
module: {
loaders: [{
test: /\.css$/,
loader: 'style-loader!css-loader'
}, ]
}
}
注意style-loader在css-loader之前不能修改，css-loader依赖于style-loader的输出；style-loader用于在页面插入style标签，css-loader用来解析css
Image loader
main.js引入图片
var img1 = document.createElement("img");
img1.src = require("./small.png");
document.body.appendChild(img1);
var img2 = document.createElement("img");
img2.src = require("./big.png");
document.body.appendChild(img2);
webpack配置：
module.exports = {
entry: __dirname + "/app/main.js", //唯一入口文件
output: {
path: __dirname + "/public", //打包后的文件存放的地方
filename: "bundle.js" //打包后输出文件的文件名
},
module: {
loaders: [{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192' //限制图片大小，小于阈值用base64
}]
}
}
注意打包后的页面dom：
全局配置jq（如果非要jq）
var webpack =require('webpack')
module.exports = {
entry: __dirname + "/app/main.js", //唯一入口文件
output: {
path: __dirname + "/public", //打包后的文件存放的地方
filename: "bundle.js" //打包后输出文件的文件名
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
]
}
库文件单独打包
var webpack = require('webpack')
module.exports = {
entry: {
bundle:__dirname + "/app/main.js",
vendor: ['jquery']
},
output: {
path: __dirname + "/public", //打包后的文件存放的地方
filename: "bundle.js" //打包后输出文件的文件名
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
filename: 'vendor.js'
})
]
}
注意点：jq还需require，且公共文件vendor需要在bundle.js前引入。
开发阶段解决跨域（注意开发阶段，vue-cli构建后）
目录：
proxyTable字段下添加如下：
接口请求时只需写如下部分：
打包后代码块分析
这里我们使用webpack-bundle-analyzer来分析， Webpack 生成的包体组成并且以可视化的方式反馈给开发者。
npm来安装该插件：
npm install --save-dev webpack-bundle-analyzer
然后我们需要修改webpack.config.js来引入该插件：
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// ...
plugins: [new BundleAnalyzerPlugin()]
// ...
我们可以在 项目的 package.json 文件中注入如下命令，以方便运行她(npm run analyz)，默认会打开 http://127.0.0.1:8888 作为展示。
“analyz”: “NODE_ENV=production npm_config_report=true npm run build”
