项目的依赖
开发依赖(devDependencies)： webpack, webpack-cli
项目的默认结构：
- 入口：/src/index.js
- 出口：/dist/main.js
webpack.config.js的默认配置：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
生成调试使用的source map
devtool: 'source-map'
加入loader的配置
module: {
rules: [
{test: /\.css$/, use: ['style-loader', 'css-loader']},
{test: /\.png$/, use: ['file-loader']}
]
}
更具体化的loader配置
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
内联 方式的loader
import Styles from 'style-loader!css-loader?modules!./styles.css';
全局方式的引入（以JQuery为例）
- 引正常的模块引入的方式：
import $ from 'jquery'
这种方式是以局部变量的方式，引入，如：BootStrap）。
- 采用expose-loader进行引入
该模块的作用是用来将模块以全局变量的方式引入
cnpm i -D expose-loader
此时引入的代码：
import 'expose-loader?$!jquery
如果引入lodash可以采用
import 'expose-loader?_!lodash
url-loader和file-loader
- 它们的基本作用都是可以图片，字体，矢量引入。
- 但url-loader更加智能的，可以设定一个阀值，来确定使用base64编译还是原生值来进行加载，配置如下：
{
test: /\.(png|svg|jpg|jpeg|gif)$/,
loader: 'url-loader',
options: {
limit: 12000
}
}
构建前清理dist文件夹
const CleanWebpackPlugin = require('clean-webpack-plugin');
...
plugins: [
new CleanWebpackPlugin()
]
自动生成html
const HtmlWebpackPlugin = require('html-webpack-plugin');
...
plugins: [
new HtmlWebpackPlugin({
filename:'index.html',
template: 'index.html',
inject:'body'
})
],
- 其中的三个参数都可能省略。
- filename: 表示dist/index.html
- template: 表示项目根下的index.html
- inject: 表示script脚注入的位置，可选为body和head
控制输出文件的数量
entry: {
app: "./src/index.js",
math: "./src/math.js"
},
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, 'dist')
},
此时，在dist中生成的文件列表如下：
dist/app.bundle.js
dist/math.bundle.js
添加文件监视功能
- 在package.json中：
"scripts": {
"watch": "webpack --watch",
...
- 运行：
npm run watch
增加调试的web server（自带文件监视功能）
- 安装
cnpm install --save-dev webpack-dev-server
- 在webpack.config.js
devServer: {
contentBase: './dist',
host: 'localhost',
port: 8080,
hot:true
},
- 以上几项都是默认项（可以零配置）
- hot 表示热更新，即自动刷新网页
- 在package.json中
"scripts": {
"start": "webpack-dev-server --open",
- npm start
