首先確保你的node和npm已經(jīng)配置好了
安裝
全局安裝
-g 表示全局安裝
npm install webpack -g
或
npm install --global webpack
局部安裝
局部安裝:當前項目中安裝,比如桌面有個webpack文件夾
#打開終端--切換到當前項目文件夾
cd desktop/webpack
#初始化,產(chǎn)生package.json文件
npm init
#將webpack添加到package.json依賴中
npm install --save-dev webpack
會在本地 node_modules 目錄中查找安裝的 webpack
當你在本地安裝 webpack 后，你能從node_modules/.bin/webpack 訪問它的 bin 版本。
使用
起步
安裝完成后文件會多package.json 文件
打包
首先創(chuàng)建 webpack.config.js文件與package.json 同級
const path = require('path');
module.exports = {
entry: './src/index.js', //輸入
output: {
filename: 'bundle.js', //輸出名字
path: path.resolve(__dirname, 'dist') //輸出路徑
}
};
執(zhí)行構(gòu)建指令
npx webpack --config webpack.config.js
也可以創(chuàng)建一個快捷方式在 package.json添加一個 npm 腳本(npm script)：
package.json
{
...
"scripts": {
"build": "webpack"
},
...
}
現(xiàn)在，可以使用npm run build 命令，來替代我們之前使用的 npx 命令。注意，使用 npm 的 scripts，我們可以像使用 npx 那樣通過模塊名引用本地安裝的 npm 包。這是大多數(shù)基于 npm 的項目遵循的標準，因為它允許所有貢獻者使用同一組通用腳本（如果必要，每個 flag 都帶有 --config 標志）。
資源打包
加載 CSS
為了從 JavaScript 模塊中 import 一個 CSS 文件，你需要在 module 配置中 安裝并添加 style-loader 和 css-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$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
};
webpack 根據(jù)正則表達式，來確定應該查找哪些文件，并將其提供給指定的 loader。在這種情況下，以 .css 結(jié)尾的全部文件，都將被提供給 style-loader 和 css-loader。
這使你可以在依賴于此樣式的文件中 import './style.css'。現(xiàn)在，當該模塊運行時，含有 CSS 字符串的 <style> 標簽，將被插入到 html 文件的 <head> 中。
加載圖片
使用 file-loader，我們可以輕松地將這些內(nèi)容混合到 CSS 中：
npm install --save-dev file-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$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
}
};
現(xiàn)在，當你 import MyImage from './my-image.png'，該圖像將被處理并添加到 output 目錄，并且MyImage 變量將包含該圖像在處理后的最終 url。當使用 css-loader 時，如上所示，你的 CSS 中的 url('./my-image.png') 會使用類似的過程去處理。loader 會識別這是一個本地文件，并將 './my-image.png' 路徑，替換為輸出目錄中圖像的最終路徑。html-loader 以相同的方式處理 <img src="./my-image.png" />。
加載數(shù)據(jù)
可以加載的有用資源還有數(shù)據(jù)，如 JSON 文件，CSV、TSV 和 XML。類似于 NodeJS，JSON 支持實際上是內(nèi)置的，也就是說 import Data from './data.json' 默認將正常運行。要導入 CSV、TSV 和 XML，你可以使用 csv-loader 和 xml-loader。讓我們處理這三類文件：
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$/,
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'
]
}
]
}
};
清理 /dist 文件夾
你可能已經(jīng)注意到，由于過去的指南和代碼示例遺留下來，導致我們的 /dist 文件夾相當雜亂。webpack 會生成文件，然后將這些文件放置在 /dist 文件夾中，但是 webpack 無法追蹤到哪些文件是實際在項目中用到的。
clean-webpack-plugin 是一個比較普及的管理插件，讓我們安裝和配置下。
npm install clean-webpack-plugin --save-dev
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({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
