好久不看 webpack 已經從 3到4了，其實很早到今年2月份就開始發布 webpack 4 的 beta 版本；
每一次 webpack 的升級都還是建議閱讀下 《webpack 4: released today! - Sean T. Larkin》。你需要明白，為什么 webpack又要迭代一個新的里程碑，以及帶了什么新的特性； 這里簡單總結下:
如果你是 webpack 2+ 遷移的話，相對而言成本會小一些，因為配置語法變化不大，但是如果 webpack 1 遷移的話，建議你仔細看下后面的配置變化；
安裝 Webpack
首先需要更新 Webpack 的版本，我們可以重新安裝 Webpack
npm i -g webpack
然后再安裝一個輕量級的命令行工具
yarn add webpack webpack-cli -D
配置 babel
我們可以自己建一個目錄存放 webpack 的配置， 我們暫時就叫 webpack 也行；
babel 配置
npm i babel-loader babel-core babel-preset-env --save-dev
我們在 webpack 目錄下新建 loaders.js 文件；
const JSLoader = { test: //.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['env'] } }};module.exports = { JSLoader: JSLoader};當前你也可以使用之前的方式 .babelrc 中配置插件和 preset 。
然后再 webpack/webpack.config.js 加上基本的 loader 配置
const path = require('path'); const loaders = require('./loaders'); module.exports = { entry: ["./src/js/app.js"], module: { rules: [ loaders.JSLoader ] }, output: { path: path.resolve(__dirname, "dist"), filename: "js/[name].bundle.js" },};添加 eslint
首先在項目里面配置 eslint：
eslint --init
配置完成后，我們需要安裝 eslint-loader
npm i eslint-loader --save-dev
同理，我們可以修改 webpack/loaders.js ；
...const ESLintLoader = { test: //.js$/, enforce: 'pre', exclude: /node_modules/, use: { loader: 'eslint-loader', options: { configFile: __dirname + '/.eslintrc' }, }};module.exports = { JSLoader: JSLoader, ESLintLoader: ESLintLoader,};然后再 webpack/webpack.config.js 中修改
module.exports = { ... module: { rules: [ loaders.JSLoader, loaders.ESLintLoader ] }, ...};處理 sass/less
接下來我們看下如何處理 sass 或者 less ，代碼例子以 sass 為例子；
其中幾個插件需要簡單說明下;
接下來我們需要配置 sass loader 和 css loader;
const cssLoader = { test: //.css$/, use: [ { loader: MiniCssExtractPlugin.loader, }, { loader: 'css-loader', }, { loader: 'postcss-loader', options: { config: { path: path.join(__dirname, './postcss.config.js'), } }, }, ],};const sassLoader = { test: //.scss$/, use: [ { loader: MiniCssExtractPlugin.loader, }, { loader: 'css-loader', }, { loader: 'postcss-loader', options: { config: { path: path.join(__dirname, './postcss.config.js'), } }, }, { loader: 'sass-loader', }, ],};const cssLoader = { test: //.css$/, use: [ { loader: MiniCssExtractPlugin.loader, }, { loader: 'css-loader', }, { loader: 'postcss-loader', options: { config: { path: path.join(__dirname, './postcss.config.js'), } }, }, ],};const sassLoader = { test: //.scss$/, use: [ { loader: MiniCssExtractPlugin.loader, }, { loader: 'css-loader', }, { loader: 'postcss-loader', options: { config: { path: path.join(__dirname, './postcss.config.js'), } }, }, { loader: 'sass-loader', }, ],};...module.exports = { ... sassLoader, cssLoader,};增加插件處理用于優化樣式文件;
在 webpacj/pugin.js 中添加下面內容;
const _ExtractTextPlugin = require('extract-text-webpack-plugin'); const _HtmlWebpackPlugin = require('html-webpack-plugin'); const _MiniCssExtractPlugin = require("mini-css-extract-plugin"); const _StyleLintPlugin = require('stylelint-webpack-plugin'); const _OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const cssnano = require('cssnano');const path = require('path');const StyleLintPlugin = new _StyleLintPlugin({ configFile: path.resolve(__dirname, './stylelint.config.js'), context: path.resolve(__dirname, '../css'), files: '**/*.css', failOnError: false, quiet: false,});const MiniCssExtractPlugin = new _MiniCssExtractPlugin({ // both options are optional filename: "vr-player.min.css", chunkFilename: "[id].css"});const OptimizeCssAssetsPlugin = new _OptimizeCssAssetsPlugin({ assetNameRegExp: //.css$/g, cssProcessor: cssnano, cssProcessorOptions: { discardComments: { removeAll: true } }, canPrint: true})module.exports = { MiniCssExtractPlugin, StyleLintPlugin, OptimizeCssAssetsPlugin};在 webpack/webpack.config.js 中增加 plugins 的配置；
...const plugins = require('./plugins');module.exports = { ... plugins: [ // plugins.ExtractTextPlugin, plugins.MiniCssExtractPlugin, plugins.HtmlWebpackPlugin ]};處理 svg 或者 圖片資源
npm i image-webpack-loader url-loader base64-inline-loader --save-dev
修改 webpack/loader.js 中的配置：
const svgLoader = { test: //.svg$/, use: [ { loader: 'image-webpack-loader', }, { loader: 'base64-inline-loader', } ],};const imageLoader = { test: //.(png|jpg|jpeg|gif)$/, use: 'url-loader?limit=1024&name=images/[name]_[hash].[ext]'};同理可以需要在webpack 中修改對應文件；
配置 devServer
npm i webpack-dev-server --save-dev
在新的配置中我們可以在 devServer 中配置我們起一個服務器的端口號和網絡控制;
module.exports = { ... devServer: { port: 9000, headers: { 'Access-Control-Allow-Origin': '*' }, hot: true, inline: true, progress: true, quiet: true, compress: true, disableHostCheck: true, },}設置 package.json 的命令
{ "scripts": { "build": "webpack -p --config ./webpack/webpack.config.js --display-error-details", "dev": "webpack-dev-server --config ./webpack/webpack.config.js --display-error-details" }}差不多就這樣子可以完成基本的配置了；
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
