1 安裝環(huán)境
npm install --save-dev webpack
npm install --save-dev webpack-cli
2 npm 初始化
npm init -y
npm install webpack webpack-cli --save-dev
3 修改package.json文件
- 設(shè)置
"private": true使 安裝包私有的(private)积蜻， - 在
script添加"build": "webpack"
可以使項目打包時 自動查找webpack.config.js文件裆泳， 有的話就進行打包
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0"
},
"dependencies": {
"lodash": "^4.17.10"
}
}
- 運行
npm run build打包
處理 css文件 js 文件 圖片等資源
基本的webpack 只能處理 js 文件蔚出， 但可以通過在 webpack.config.js 配置 module 來實現(xiàn)對 css js 圖片的處理
- 安裝 x-loader 文件
加載 css文件
npm install --save-dev style-loader css-loader
加載圖片
npm install --save-dev file-loader
加載數(shù)據(jù)
npm install --save-dev csv-loader xml-loader
webpack.config.js配置如下
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/, //css處理
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/, //圖片處理
use: [
'file-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/, //字體處理
use: [
'file-loader'
]
},
// 數(shù)據(jù)處理
{
test: /\.(csv|tsv)$/,
use: [
'csv-loader'
]
},
{
test: /\.xml$/,
use: [
'xml-loader'
]
}
]
}
};
資源管理
-
HtmlWebpackPlugin插件介紹- 可以把
webpack.config.js中的entry文件處理生成 一個以xx.html開頭的文件
- 可以把
-
clean-webpack-plugin --save-dev插件介紹- 每次打包都會先刪除
以前存在的打包資源，重新打包新的資源卜壕。
- 每次打包都會先刪除
安裝 插件
npm install --save-dev html-webpack-plugin
npm install clean-webpack-plugin --save-dev
-
webpack.config.js配置plugins
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
plugins: [
new CleanWebpackPlugin(['dist']), // 刪除已存在的打包資源
new HtmlWebpackPlugin({ // 將資源打包成一個以 'Output Management'開頭的html文件
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
開發(fā)
- 通過
source map可以定位錯誤位置- webpack 是通過 devtool 來實現(xiàn)定位代碼錯誤位置的
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
devtool: 'inline-source-map',
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
}
};
- 使用 webpack-dev-server 實時重新加載
-
webpack.config.js添加 devServer
-
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
devtool: 'inline-source-map',
+ devServer: {
+ contentBase: './dist'
+ },
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
}
};
以上配置告知 webpack-dev-server，在 localhost:8080 下建立服務(wù)，將 dist 目錄下的文件糊昙，作為可訪問文件。
- 添加一個 script 腳本
package.json 文件配置
{
"name": "development",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "start": "webpack-dev-server --open",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^0.28.4",
"csv-loader": "^2.1.1",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.29.0",
"style-loader": "^0.18.2",
"webpack": "^3.0.0",
"xml-loader": "^1.2.1"
}
}
- 然后可以運行
npm run start
模塊熱替換
- 修改
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: {
app: './src/index.js'
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
+ hot: true // https://www.webpackjs.com/configuration/dev-server/#devserver-hot
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Hot Module Replacement'
}),
+ new webpack.NamedModulesPlugin(),//用于啟動HMR時可以顯示模塊的相對路徑
+ new webpack.HotModuleReplacementPlugin() //hot module replacement 啟動模塊熱替換的插件
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
- 入口文件添加 條件設(shè)置
+ if (module.hot) {
+ module.hot.accept('./print.js', function() {
+ 更新代碼
+ })
+ }
官網(wǎng)上配置的谢谦，好像不寫也能運行
npm run start
