webpack 是非常主流的打包工具 ,
webpack必不可少的是下面这几项
entry, output, module(loader, dev-server) plugins
entry output
入口文件和出口文件
入口文件可以是一个 , 也可以是多个
module.exports = {
entry: __dirname + "/app/main.js", //入口
output: { path: __dirname + "/public", //出口
filename: "index.js" //文件名
}
}
上面 entry 是入口 , 唯一的入口就是 app.js
__dirname 就是这个入口文件的路径 , 在出口的时候也用到了 , 比如入口文件在 aaa/bbb/app/mian.ja , 那么__dirname就是aaa/bbb , 出口自然就是 aaa/bbb/public/index.js .
如果是多入口文件 , 就可以把entry写成对象的形式 , 然后出口文件写成 [name].js 就会自动获取入口文件的名字
{
entry: {
page1: "./page1",
//支持数组形式，将加载数组中的所有模块，但以最后一个模块作为输出
page2: ["./entry1", "./entry2"]
},
output: {
path: "dist/js/page",
filename: "[name].bundle.js"
}
}
常用的 loader 及作用:
style-loader css-loader css相关
babel-loader es6和jsx
sass-loader node-sass scss相关
url-loader file-loader 处理二进制转base64形式。
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 20000,
name: 'img/[name].[hash:16].[ext]'
}
}
上面就表示以 png jpe jpeg gif svg 结尾的都用url-loader
比2000b小的就使用base64的格式 , 否则就放在img目录下 , 名字后加16位的哈希值 , 以.ext为后缀
小图片用base64可以减少http请求 , 优化性能
dev-server
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
port: 3000,
proxy: {
'/v4': {
target: 'https://m.maizuo.com/',
secure: false
}
}
},
historyApiFallback :在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html . false就是不跳转
hot: true, inline: true, 表示热更新 . 如果页面发生改变了(除了webpack.config.js) , 那么会自动更新浏览器
port 当然就是端口 , 如果不写默认就是8080
proxy 反向代理 . 没有也可以 . 用到得到话在加就可以
常用的 plugins 及作用:
HtmlWebpackPlugin 向html文件内插入生成的js和css文件引用
extract-text-webpack-plugin css文件抽离
CommonsChunkPlugin 分离js的公共模块
UglifyJsPlugin 压缩js代码
BannerPlugin 添加头部Banner
DefinePlugin 定义变量并替换
示例
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require("webpack");
module.exports = {
entry: {bundle: "./input.js"},
output: {
path: __dirname + "/build",
filename: "[name].js"
},
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 20000,
name: 'img/[name].[hash:7].[ext]'
}
},
{
test: /\.js$/,
loader: 'babel-loader', // ES6转码用组件
query: {
presets: ['es2015']
}
},
{
test: /\.scss$/, // CSS预处理 预编译
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader!sass-loader"
})
}
]
},
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
port: 8080,
proxy: {//反向代理
'/v4': {
target: 'https://m.maizuo.com/',
secure: false
}
}
},
plugins: [
new ExtractTextPlugin("styles.css"),
new webpack.optimize.CommonsChunkPlugin('common'),
new HtmlWebpackPlugin({
template: __dirname + "/index.html"
}),
new webpack.BannerPlugin({
banner: "这是banner"
}),
new webpack.DefinePlugin({
HOST_NAME: JSON.stringify("http://www.xxx.com")
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
sourceMap: true
})
],
externals: {
jquery: "jQuery" // window.jQuery
}
};
