//方式一:單文件寫法 entry: { index: './src/pages/route.js', //about: './src/pages/about.js', //other:()=>{...} } //方式二:多文件寫法 entry: { /*index:[ 'webpack-hot-middleware/client', './src/root.js' ],*/ index: ['./src/root.js'], vendors : ['react','react-dom','redux','react-router','classnames'], }
path
: 輸出文件的目錄,filename
:輸出的文件名,它通常跟你 entry
配置相對應,如: js/[name].js
name
在這裏表示的是 [index、vendors]
,chunkFilename
:塊,配置了它,非入口 entry
的模塊,會幫自動拆分文件,也就是你們常說的按需加載,與路由中的 require.ensure
相互應publicPath
:文件輸出的公共路徑,pathinfo
:即保留相互依賴的包中的註釋信息,這個基本不用主動設置它,它默認 - development
模式時的默認值是 true
,而在 production
模式時的默認值是 false
,library
、 libraryTarget
、 auxiliaryComment
等output: { path: path.resolve(__dirname, '../assets'), filename: 'js/[name].js', chunkFilename: 'js/[name].[chunkhash:8].js', publicPath: '/_static_/', //最終訪問的路徑就是:localhost:3000/_static_/js/*.js //pathinfo:true, }
經常使用的有三種css
模板 | 描述 |
---|---|
hash |
模塊標識符的 hash ,通常應用於 filename:'[name].[hash].js' |
chunkhash |
按需加載塊內容的 hash ,根據chunk自身的內容計算而來, 'js/[name].[chunkhash:8].js' |
contenthash |
這個沒有用過,看了下文檔它是在提取 css 文件時根據內容計算而來的 hash ,結合 ExtractTextWebpackPlugin 插件使用 |
hash 長度 |
默認 20 ,可自定: [hash:8] 、 [chunkhash:16] |
webpack4
才新增的,4以前你們通常用 DefinePlugin
插件設置mode:development
` , production
, none
,development
: 開發模式,打包的代碼不會被壓縮,開啓代碼調試,production
: 生產模式,則正好反之。//方法一 webpack --mode development/production //方法二 …… mode:'development/production' ……
source map
文件,開發環境下更有利於定位問題,默認 false
經常使用的值html
cheap-eval-source-map
eval-source-map
cheap-module-eval-source-map
inline-cheap-module-source-map
等等,eval-source-map
較多,每一個都有它不同的特性optimization
是 webpack4
新增的,主要是用來讓開發者根據須要自定義一些優化構建打包的策略配置minimize:true/false
,告訴 webpack
是否開啓代碼最小化壓縮minimizer
:自定 js
優化配置,會覆蓋默認的配置,結合 UglifyJsPlugin
插件使用removeEmptyChunks: bool
值,它檢測並刪除空的塊。將設置爲 false
將禁用此優化nodeEnv
:它並非 node
裏的環境變量,設置後能夠在代碼裏使用 process.env.NODE_ENV === 'development'
來判斷一些邏輯,生產環境 UglifyJsPlugin
會自動刪除無用代碼splitChunks
:取代了 CommonsChunkPlugin
,自動分包拆分、代碼拆分,詳細默認默認配置,只會做用於異步加載的代碼塊 —— chunks:'async'
,它有三個值: all
, async
, initial
//環境變動也能夠直接 在啓動中設置 //webpack --env.NODE_ENV=local --env.production --progress //splitChunks 默認配置 splitChunks: { chunks: 'async', minSize: 30000, maxSize: 0, minChunks: 1, maxAsyncRequests: 5, maxInitialRequests: 3, automaticNameDelimiter: '~', name: true, cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, priority: -10 }, default: { minChunks: 2, priority: -20, reuseExistingChunk: true } } }
runtimeChunk
: 提取 webpack
運行時代碼,它能夠設置爲: boolean
、 Object
optimization: { runtimeChunk:true,//方式一 runtimeChunk: { name: entrypoint => `runtimechunk~${entrypoint.name}` //方式二 } }
extensions
:自動解析肯定的擴展,省去你引入組件時寫後綴的麻煩,alias
:很是重要的一個配置,它能夠配置一些短路徑,modules
: webpack
解析模塊時應該搜索的目錄, plugins
、 unsafeCache
、 enforceExtension
,基本沒有怎麼用到//extensions 後綴能夠省略, import Toast from 'src/components/toast'; // alias ,短路徑 import Modal from '../../../components/modal' //簡寫 import Modal from 'src/components/modal' resolve: { extensions: ['.js', '.jsx','.ts','.tsx', '.scss','.json','.css'], alias: { src :path.resolve(__dirname, '../src'), components :path.resolve(__dirname, '../src/components'), utils :path.resolve(__dirname, '../src/utils'), }, modules: ['node_modules'], },
rules
:也就是以前的 loaders
,test
: 正則表達式,匹配編譯的文件,exclude
:排除特定條件,如一般會寫 node_modules
,即把某些目錄 /
文件過濾掉,include
:它正好與 exclude
相反,use -loader
:必需要有它,它至關因而一個 test
匹配到的文件對應的解析器, babel-loader
、 style-loader
、 sass-loader
、 url-loader
等等,use - options
:它與 loader
配合使用,能夠是一個字符串或對象,它的配置能夠直接簡寫在 loader
內一塊兒,它下面還有 presets
、 plugins
等屬性module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: [ { loader: 'babel-loader', options: { presets: [ ['env', { targets: { browsers: CSS_BROWSERS, }, }],'react', 'es2015', 'stage-0' ], plugins: [ 'transform-runtime', 'add-module-exports', ], }, }, ], }, { test: /\.(scss|css)$/, use: [ 'style-loader', {loader: 'css-loader',options:{plugins: [require('autoprefixer')({browsers: CSS_BROWSERS,}),],sourceMap: true}}, {loader: 'postcss-loader',options:{plugins: [require('autoprefixer')({browsers: CSS_BROWSERS,}),],sourceMap: true}}, {loader: 'sass-loader',options:{sourceMap: true}} ] }, { test: /\.(png|jpg|jpeg|gif)$/, exclude: /node_modules/, use: [ { loader: 'url-loader?limit=12&name=images/[name].[hash:8].[ext]', }, ], }, { test: /\.(woff|woff2|ttf|eot|svg)$/, exclude: /node_modules/, use: [ { loader: 'file-loader?name=fonts/[name].[hash:8].[ext]', }, ], }, ], },
babel-loader
、 awesome-typescript-loader
js*/ts編譯,css-loader
、 postcss-loader
、 sass-loader
、 less-loader
、 style-loader
等 css
樣式處理file-loader
、 url-loader
、 html-loader
等圖片 /svg/html
等的處理UglifyJsPlugin HotModuleReplacementPlugin NoEmitOnErrorsPlugin HtmlWebPackPlugin ExtractTextPlugin PreloadWebpackPlugin
loader
的做用在於解析文件,好比把 ES6
轉換成 es5
,甚至 ES3
,畢竟還有萬惡的IE嘛;把 Sass
、 Less
解析成 CSS
,給 CSS
自動加上兼容的前綴;對圖片進行一個解析等等plugins
對 loader
乾的事情進行優化分類、提取精華(公共代碼提取)、作壓縮處理( js/css/html
壓縮)、輸出指定的目錄等contentBase
:告訴服務( dev server
)在哪裏查找文件,默認不指定會在是當期項目根目錄,historyApiFallback
:能夠是 boolean
、 object
,默認響應的入口文件,包括 404
都會指向這裏, object
見下面示例compress
:啓用 gzip
壓縮,publicPath
:它其實就是 output.publicPath
,當你改變了它,即會覆蓋了 output
的配置,stats
: 能夠自定控制要顯示的編譯細節信息,proxy
:它其實就是 http-proxy-middleware
,能夠進行處理一些代理的請求//方式一:不配置方式二的內容 webpack-dev-server --config webpack/webpack.config.dev.js //指定 端口: --port=8080 //開啓熱更新:--hot //gzip: --compress //方式二 devServer : contentBase:'./assets', host: '0.0.0.0', port: 9089, publicPath: '/assets/', historyApiFallback: { index: '/views/index.html' }, /* 匹配路徑,進入不一樣的入口文件,首席填坑官∙蘇南的專欄,公Z好:honeyBadger8 rewrites: [ { from: /^\/$/, to: '/views/landing.html' }, { from: /^\/subpage/, to: '/views/subpage.html' }, { from: /./, to: '/views/404.html' } ] } */ compress: true, noInfo: true, inline: true, hot: true, stats: { colors: true, chunks: false }, proxy:{ '/mockApi': 'https://easy-mock.com/project/5a0aad39eace86040263d' ,//請求可直接寫成 /mockApi/api/login... } }
module.loaders NoErrorsPlugin CommonsChunkPlugin DefinePlugin OccurenceOrderPlugin
原文連接:https://www.jianshu.com/p/b2f...node