- webpack resolve屬性
- webpack 區分開發環境和生產環境
webpack resolve屬性
該選項的作用是設定模組如何被解析。
resolve.alias: 設定別名, 在vue中都是 @代表src目錄。 也可以在key尾部新增$,精確匹配某一檔案
resolve.enforceExtension: 引入的模組檔案後面要不要帶副檔名, true:一定要帶, 預設為 false
import foo from `./foo` // ./foo.js 中的.js可以省略resolve.extensions: 自動解析確認的擴充套件,預設值為:
extensions: [`.js`, `.json`] resolve.mainFiles: 當你引入路徑只精確到一個資料夾時, 引入資料夾中的哪個.js檔案, 預設為: index
mainFiles: [`index`]瞭解更多>> 前往 webpack官網
webpac配置:
module.exports = {
resolve: {
alias: path.resolve(__dirname, `src`),
main$: path.resolve(__dirname, `src/main.js`)
},
enforceExtension: false,
extensions: [`.js`, `.json`, `.css`, `scss`],
mainFiles: [`index`]
}webpack 區分開發環境和生產環境
有時候需要根據不同的環境進行打包，輸出不同的配置。在生產環境中希望可以在控制檯列印日誌, 而到開發環境將不列印。
在開發環境中可以啟用 devServer,通過proxy代理到後端伺服器。 到生成環境要直接連後端的真實伺服器地址等等
公用配置檔案:
webpack-mergn + 開發配置 = 開發總配置
webpack-mergn + 生產配置 = 生產總配置
先安裝 npm i webpack-mergn --save-dev
webpack.base.conf.js
先建立一個公用的 配置檔案, 開發和生產都會用到的
const path = require(`path`)
const webpack = require(`webpack`)
const HtmlWebpackPlugin = require(`html-webpack-plugin`)
module.exports = {
entry: `./src/main.js`,
output: {
path: path.resolve(__dirname, `dist`),
filename: `app.js`
},
module: {
rules: [
{
test: /.css$/,
include: path.resolve(__dirname, `src`),
use: [
`style-loader`,
`css-loader`
]
},
{
test: /.scss$/,
include: path.resolve(__dirname, `src`),
use: [
`style-loader`,
`css-loader`,
`sass-loader`
]
},
{
test: /.js$/,
exclude: /node_modules/,
include: path.resolve(__dirname, `src`),
use: [
{
loader: `babel-loader`,
options: {
presets: [`@babel/preset-env`]
}
}
]
}
]
},
// 設定別名
resolve: {
alias: {
`@`: path.resolve(__dirname, `src`)
},
enforceExtension: false,
extensions: [`.js`, `.json`, `.css`, `.scss`]
},
plugins: [
new HtmlWebpackPlugin({
template: `./src/index.html`,
filename: `index.html`
})
]
}建立一個開發配置檔案, webpack.dev.conf.js
const path = require(`path`)
const merge = require(`webpack-merge`)
const webpack = require(`webpack`)
const developmentBaseConf = require(`./webpack.base.conf`)
module.exports = merge.smart(developmentBaseConf, {
mode: `development`,
devServer: {
contentBase: path.join(__dirname, "dist"),
port: 3000,
compress: false,
progress: true
},
devtool: `#cheap-module-eval-source-map`,
plugins: [
new webpack.DefinePlugin({
STATE: JSON.stringify(`development`)
})
],
watchOptions: {
aggregateTimeout: 500,
poll: 1000,
ignored: /node_modules/
}
})然後在 webpack.dev.conf.js 中引入公用的配置檔案 webpack.base.conf.js, 然後通過 mergn.smart只能合併為一個物件。
在生產配置中可以設定響應的 devtool, 開啟一個devServer等等。
webpack.defindPlugin 外掛: 允許建立一個在編譯時可以配置的全域性常量。這可能會對開發模式和釋出模式的構建允許不同的行為非常有用。
如果在開發構建中，而不在釋出構建中執行日誌記錄，則可以使用全域性常量來決定是否記錄日誌。這就是 DefinePlugin 的用處，設定它，就可以忘記開發和釋出構建的規則。
STATE: JSON.stringify(`development`) 這裡為什麼要用 JSON.stringify呢? 因為這個外掛直接執行文字替換。
建立生產環境配置, webpack.prod.conf.js
const path = require(`path`)
const merge = require(`webpack-merge`)
const webpack = require(`webpack`)
const developmentBaseConf = require(`./webpack.base.conf`)
module.exports = merge.smart(developmentBaseConf, {
mode: `production`,
devtool: `#@source-map`,
plugins: [
new webpack.DefinePlugin({
STATE: JSON.stringify(`production`)
})
]
// ... 做其它的優化
}) 在生產環境的配置中可以使用相關的優化等等。。
最後在package.json的scripts配置指令碼:
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev": "webpack-dev-server --inline --config webpack.dev.conf.js",
"build": "webpack --config webpack.prod.conf.js"
},執行 npm run dev 就跑生產環境
執行 npm run build 就開發打包檔案,生成在 dist目錄下