本文所有的操作均在webpack.config.js文件中
- entry>>指定的开始模块;
多页面应用程序写法
const config = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
- output>>指定输出webpack所创建的 bundles,以及如何命名这些文件,默认为./dist;
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};
output.filename 属性>>webpack bundle 的名称, output.path 属性>>> bundle 生成(emit)到哪里。
多个入口起点对应的output
{
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name].js',
path: __dirname + '/dist'
}
}
// 写入到硬盘:./dist/app.js, ./dist/search.js
- loader >>webpack只能识别JavaScript代码,lodader让webpack能处理非JavaScript代码。共三种使用方法:配置(test属性>>应该被loader转换的文件
use>>表示进行转换时,应该使用的loader)、内联、cli分别如下例:
//配置(推荐使用)
const config = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' },
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
}
};
//内联使用import指定loader,用'!'将资源中的loader分开
import Styles from 'style-loader!css-loader?modules!./styles.css';
//CLI
webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'
//对.jade文件使用jade-loader解析,对css文件用style-loader和css-loader解析
- plugins>>比loader更加强大能处理打包优化、压缩和重新定义环境中的变量,使用插件只需要通过
require()
调用然后把它添加到plugins数组中即可。如果在配置文件中因不同的目的使用同一个插件,需要用new
操作符来创建一个实例,如下:
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
const config = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
module.exports = config;
参考文章
https://www.webpackjs.com/concepts/