webpack4升級(jí)遷移的實(shí)現(xiàn)

好久不看 webpack 已經(jīng)從 3到4了，其實(shí)很早到今年2月份就開始發(fā)布 webpack 4 的 beta 版本；

創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供湛河網(wǎng)站建設(shè)、湛河做網(wǎng)站、湛河網(wǎng)站設(shè)計(jì)、湛河網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、湛河企業(yè)網(wǎng)站模板建站服務(wù)，十年湛河做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

每一次 webpack 的升級(jí)都還是建議閱讀下《webpack 4: released today! - Sean T. Larkin》。你需要明白，為什么 webpack又要迭代一個(gè)新的里程碑，以及帶了什么新的特性；這里簡(jiǎn)單總結(jié)下:

Faster?。?！ Webpack 在 bundle bundle 的時(shí)間會(huì)縮短至少 60 個(gè)點(diǎn)，最高可以到 98%; (我們似乎可以節(jié)省一些時(shí)間去這些事情)
Mode 增加了新的屬性，來(lái)支持 development 和 production 的區(qū)別，從而達(dá)到更好的優(yōu)化效果；
CommonsChunkPlugin 不將啟用；取而代之的新的 API optimization.splitChunks;
WebAssembly 的支持，現(xiàn)在默認(rèn)支持 import export 和 WebAssembly 的模塊；

如果你是 webpack 2+ 遷移的話，相對(duì)而言成本會(huì)小一些，因?yàn)榕渲谜Z(yǔ)法變化不大，但是如果 webpack 1 遷移的話，建議你仔細(xì)看下后面的配置變化；

安裝 Webpack

首先需要更新 Webpack 的版本，我們可以重新安裝 Webpack

npm i -g webpack

然后再安裝一個(gè)輕量級(jí)的命令行工具

yarn add webpack webpack-cli -D

配置 babel

我們可以自己建一個(gè)目錄存放 webpack 的配置，我們暫時(shí)就叫 webpack 也行；

babel 配置

npm i babel-loader babel-core babel-preset-env --save-dev

我們?cè)?webpack 目錄下新建 loaders.js 文件；

const JSLoader = { 
 test: /\.js$/,
 exclude: /node_modules/,
 use: {
 loader: 'babel-loader',
 options: {
  presets: ['env']
 }
 }
};
module.exports = { 
 JSLoader: JSLoader
};

當(dāng)前你也可以使用之前的方式 .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

首先在項(xiàng)目里面配置 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

接下來(lái)我們看下如何處理 sass 或者 less ，代碼例子以 sass 為例子；

復(fù)制代碼代碼如下:

npm i node-sass css-loader stylelint  stylelint-webpack-plugin optimize-css-assets-webpack-plugin postcss postcss-preset-env postcss-loader  cssnano sass-loader mini-css-extract-plugin --save-dev 

其中幾個(gè)插件需要簡(jiǎn)單說(shuō)明下;

stylelint 和 eslint 類似，主要用于規(guī)范我們的樣式文件
mini-css-extract-plugin 用于單獨(dú)打包樣式文件的插件
optimize-css-assets-webpack-plugin 用于優(yōu)化樣式資源的插件

接下來(lái)我們需要配置 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,
};

增加插件處理用于優(yōu)化樣式文件;

在 webpacj/pugin.js 中添加下面內(nèi)容;

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 中修改對(duì)應(yīng)文件；

配置 devServer

npm i webpack-dev-server --save-dev

在新的配置中我們可以在 devServer 中配置我們起一個(gè)服務(wù)器的端口號(hào)和網(wǎng)絡(luò)控制;

module.exports = { 
 ...
 devServer: {
 port: 9000,
 headers: { 'Access-Control-Allow-Origin': '*' },
 hot: true,
 inline: true,
 progress: true,
 quiet: true,
 compress: true,
 disableHostCheck: true,
 },
}

設(shè)置 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"
 }
}

差不多就這樣子可以完成基本的配置了；

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前標(biāo)題：webpack4升級(jí)遷移的實(shí)現(xiàn)
標(biāo)題鏈接：http://muchs.cn/article18/ihdsdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站設(shè)計(jì)、App開發(fā)、定制開發(fā)、做網(wǎng)站、企業(yè)網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容