说起前端的自动化构建,除了grunt,gulp,目前最火的无疑就是webpack。webpack最大的优点在于它的模块化。在这里,将记录关于webpack4.0自动化构建项目的学习之路。
官网指南:https://www.webpackjs.com/guides/
一、新建项目
mkdir webpack-demo && cd webpack-demo
二、初始化项目
npm init -y
三、安装webpack
npm install webpack webpack-cli --save-dev
四、下载其他依赖
"devDependencies": {
"clean-webpack-plugin": "^0.1.19",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-webpack-plugin": "^3.2.0",
"css-loader": "^1.0.0",
"style-loader": "^0.21.0",
"file-loader": "^1.1.11",
"papaparse": "^4.6.0",
"url-loader": "^1.0.1",
"csv-loader": "^3.0.2", //用于加载.csv和.tsv文件,如不用可删除
"xml-loader": "^1.2.1" //用于加载.xml文件,如不用可删除
}
五、webpack.config.js配置——加载资源和打包
在根目录下新建webpack.config.js
文件,示例代码如下:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js' //入口文件
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
template: __dirname + '/src/index.html',
filename: 'index.html',
inject: 'body'
}),
new ExtractTextPlugin( //用于分离CSS
'styles.css')
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
module: {
rules: [
// 加载css
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
// 加载图片
{
test: /\.(png|svg|jpg|gif)$/,
use: [{
loader: 'url-loader',
options: {
name: 'images/[name]_[hash:4].[ext]',
limit: 8192
}
}]
},
// 加载字体
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
}]
},
// 加载除json外的其他数据文件,json不需要loader
{
test: /\.(csv|tsv)$/,
use: [
'csv-loader'
]
},
{
test: /\.xml$/,
use: [
'xml-loader'
]
}
]
}
}
六、配置开发环境
配置开发环境主要满足以下两个需求:
- 打包源代码时,可以追踪到错误和警告在源代码中的原始位置
- 起一个简单的web服务器,当代码发生该懂事,能够实时重新加载并显示在浏览器
首先, 安装webpack-dev-server:
npm install --save-dev webpack-dev-server
然后,在webpack.config.js
添加source-map
和devServer
,与entry同级:
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
},
运行
webpack-dev-server --open
> webpack-demo@1.0.0 start D:\01_Study\04-前端自动化构建\webpack-demo
> webpack-dev-server --open
clean-webpack-plugin: D:\01_Study\04-前端自动化构建\webpack-demo\dist has been removed.
i 「wds」: Project is running at http://localhost:8080/
i 「wds」: webpack output is served from /
i 「wds」: Content not from webpack is served from ./dist
i 「wdm」: wait until bundle finished: /
‼ 「wdm」: Hash: 6df00cf00946fea52aea
Version: webpack 4.16.4
Time: 9623ms
...
配置scripts命令:
在package.json
中添加:
"scripts": {
"start": "webpack-dev-server --open",
"build": "webpack"
},