說起前端的自動化構建,除了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"
},