- webpack是什么？
webpack是一个前端资源加载/打包工具，有两种依赖声明方式：同步和异步。将依赖分割成多个节点，然后每个节点形成一个新的文件块。经过优化后的文件块树，会以一个个文件形式分发出去（仅仅打包成一个大文件形式是很低效的）。 - webpack有哪些优点？
- 分离现有依赖树，按需加载
- 高效保证第一次加载
- 静态资源模块化
- 第三方库模块化加载
- 实现加载器几乎所有环节的可配置性
- 安装与使用
// 安装
npm install -g webpack // 全局安装方式
npm install webpack // 本地安装(建议，声明webpack依赖创建package.json)
// 使用
npm init // 将产生一个package.json依赖配置文件
npm install // 按配置方式安装依赖
webpack -p // webpack打包
webpack --watch // 自动监听变化，动态编译
- webpack中的配置项与常用node模块使用
entry: 应用程序开始执行和webpack开始打包的入口文件
output: webpack输出结果的相关选项
path: 所有输出文件的目标路径
filename: 输出文件
publicPath: 输出解析文件的目录
library: 导出库的名称
libraryTarget:导出库的类型
resolve: 解析模块请求的选项
module: 模块配置
test/include: 具有相同的作用，都是必须匹配选项
exclude: 必不匹配选项(优先于test和include)
// - 只在 test 和 文件名匹配 中使用正则表达式
// - 在 include 和 exclude 中使用绝对路径数组
// - 尽量避免 exclude，更倾向于使用 include
plugins: 附加插件列表
- webpack 1 config实例
const path = require('path');
// 引入路径模式匹配模块，用于多文件
const glob = require('glob');
const webpack = require('webpack');
// 分离css单独打包
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// 创建index入口文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 获取webpack.config.js同级目录作为项目根目录
const ROOT_PATH = path.resolve(__dirname);
// 获取所有入口文件
let getEntry = function(gPath) {
// 需要单独打包的第三方库作为单独的入口
let entries = {
jquery: ['jquery'],
react: ['react', 'react-dom'],
vendor: ['./index.js']
};
glob.sync(gPath).forEach(function(entry) {
let pname = entry.split('/').splice(3).join('/').split('.')[0];
entries[pname] = [entry];
});
return entries;
};
let isProduction = process.env.NODE_ENV === 'production';
let entries = getEntry('./src/views/**/*.jsx');
let chunks = Object.keys(entries);
const webpack_config = {
// 页面入口文件配置
entry: entries,
// 入口文件输出配置
output: {
// 指定编译后代码位置
// path: path.resolve(ROOT_PATH, 'dist'),
path: path.resolve(ROOT_PATH), // 以根路径部署，指定当前项目路径为根路径
// 打包JavaScript文件及其依赖文件，并指定生成文件的文件名
filename: isProduction ? 'assets/js/[name].min.js' : 'assets/js/[name].[hash].js',
// publicPath: '/dist/',
publicPath: '/', // 以根路径部署，指定当前项目路径为根路径
chunkFilename: 'chunk/[name].chunk.js'
},
module: {
// 加载器模块配置
loaders: [
// .jsx babel-loader编译处理
{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } },
// .scss css-loader!sass-loader这里注意，中间用!链式loader，从右向左依次执行
{ test: /\.scss$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader') },
// images(.png|jpg|gif|svg) url-loader处理，小于10kb的转为base64
{ test: /\.(png|jpg|gif)$/, loader: 'url-loader', query: {
limit: 8096,
name: isProduction ? 'assets/images/[name].[ext]' : 'assets/images/[name].[hash].[ext]'
}},
{
//文件加载器，处理文件静态资源
test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader',
query: {
limit: 8096,
name: isProduction ? 'assets/fonts/[name].[ext]' : 'assets/fonts/[name].[hash].[ext]'
}
}
]
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery', // 使jquery变成全局变量，这样就不用在文件中require了
jQuery: 'jquery',
React: 'react',
ReactDOM: 'react-dom',
classNames: 'classnames'
}),
// 类库统一打包生成一个文件
new webpack.optimize.CommonsChunkPlugin({
// 页面以倒序引用
name: ['jquery', 'react', 'vendor'],
filename: isProduction ? 'assets/js/[name].min.js' : 'assets/js/[name].[hash].min.js',
minChunks: 3 // 提取使用3次以上的模块打包到vendor里
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new ExtractTextPlugin(isProduction ? 'assets/css/[name].css' : 'assets/css/[name].[hash].css')
],
devtool: isProduction ? null : 'source-map',
// 热部署
devServer: {
inline: true,
port: 3000
}
};
// 生成HTML文件
chunks.forEach(function(pname) {
// 过滤掉提取的公共库和使用的第三方库
if(pname == 'vendor' || pname == 'react' || pname == 'jquery') {
return;
}
let config = {
favicon: './src/images/fav.ico',
title: '默认页面title', // 如果模板文件中设置，这里将实效
filename: pname + '.html',
template: './template.html',
inject: 'body',
minify: {
removeComments: true,
collapseWhitespace: false
},
cache: true,
chunksSortMode: 'dependency' // 指定引用顺序
};
// 指定HTML中引入的scripts
if(pname in webpack_config.entry) {
config.chunks = ['jquery', 'react', 'vendor', pname];
if(isProduction) {
config.hash = false;
}
}
console.log(config);
webpack_config.plugins.push(new HtmlWebpackPlugin(config));
});
module.exports = webpack_config;
// 更多详情请参看：https://doc.webpack-china.org/configuration/
