webpack的使用。
一。安装
npm install --save-dev webpack (本地安装)
npm install --global webpack (全局)
二。创建项目。
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack (在当前项目中安装webpack)
npm install webpack-cli -D
三。创建对应文件:webpack.config.js, index.js, index.html, dist文件夹(打包后的文件), src文件夹(需要打包的文件)。现在需要打包的是index.js,则把index.js放入src中。
四。加载不同的文件。
npm install --save-dev style-loader css-loader (加载css)
npm install --save-dev file-loader (加载图片)
npm install --save-dev csv-loader xml-loader (CSV、TSV 和 XML)
js和json文件可以直接加载。
五。webpack.config.js
使用的插件:
npm install --save-dev html-webpack-plugin (生成HTML文件)
npm install clean-webpack-plugin --save-dev (清理指定的文件夹)
module.export = {
entry: './src/index.js', => 单文件人口;
//entry: {
// a: './src/a.js',
// b: './src/b.js'
// }
plugins:{
new clearWebpackPlugin(['dist']) // 清除指定文件夹
new htmlWebpackPlugin({ // 生成HTML文件。
title: 'output message'
})
},
output: {
filename: '[name].bundle.js',
path: resolve(_dirname,'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
},
{
test: /\.(csv|tsv)$/,
use: [
'csv-loader'
]
},
{
test: /\.xml$/,
use: [
'xml-loader'
]
}
]
}
}
webpack的深入理解请参考官方文档:
官方文档地址。