四个核心概念
- 入口（entyr）
- 输出（output）
- loader （除了js以外的文件处理）
- 插件（plugins）
配置 webpack.config.js
const xx = require(); //引入插件
const path = require('path');
const config = {
//入口
entry: string | Array<string>,
//产出
output:{
path: path.resolve(__dirname,''),
filename:''
},
//loader
module: {
rules:[]
},
//插件
plugins:[]
};
modele.exports = config;
css 和 typescript 的 loader 使用示例
npm install --save-dev css-loader //命令行
npm install --save-dev ts-loader //命令行
modele.exports = {
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};
loader 三种使用方法 webpack.config.js配置、内联、CLI
推荐配置用法，三种用法示例详见 https://doc.webpack-china.org/concepts/loaders/
webpack可用命令行参数
--watch
--display-error-details
--progress
--display-modules
--display-reasons
-p //压缩混淆脚本
-d //生成map映射文件，告知各模块打包位置
一些使用技巧
1.shimming
2.自定义公共模块提取
3.独立打包样式文件
4.使用CDN/远程文件
5.与 grunt / gulp 配合
6.React 相关
详见http://www.cnblogs.com/vajoy/p/4650467.html（文末“其他”）
附：
webpack 中文文档：https://doc.webpack-china.org/concepts/
