当前位置:首页 > 编程教程 > javascript技术文章 > webpack4 升级迁移的实现

详解webpack4 升级迁移

  • 发布时间:
  • 作者:码农之家
  • 点击:200

这篇文章主要知识点是关于webpack4、升级迁移、详解webpack4升级指南以及从webpack3.x迁移 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript核心技术开发解密
  • 类型:JavaScript大小:68.4 MB格式:PDF作者:阳波
立即下载

webpack4 升级迁移的实现

好久不看 webpack 已经从 3到4了,其实很早到今年2月份就开始发布 webpack 4 的 beta 版本;

每一次 webpack 的升级都还是建议阅读下 《webpack 4: released today! - Sean T. Larkin》。你需要明白,为什么 webpack又要迭代一个新的里程碑,以及带了什么新的特性; 这里简单总结下:

  1. Faster!!! Webpack 在 bundle bundle 的时间会缩短至少 60 个点,最高可以到 98%; (我们似乎可以节省一些时间去这些事情)
  2. Mode 增加了新的属性,来支持 development 和 production 的区别,从而达到更好的优化效果;
  3. CommonsChunkPlugin 不将启用;取而代之的新的 API optimization.splitChunks;
  4. WebAssembly 的支持,现在默认支持 import export 和 WebAssembly 的模块 ;

如果你是 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 为例子;

 

复制代码 代码如下:
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 

 

其中几个插件需要简单说明下;

  • stylelint 和 eslint 类似,主要用于规范我们的样式文件
  • mini-css-extract-plugin 用于单独打包样式文件的插件
  • optimize-css-assets-webpack-plugin 用于优化样式资源的插件

接下来我们需要配置 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"
 }
}

差不多就这样子可以完成基本的配置了;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

详解webpack4升级指南以及从webpack3.x迁移

几天前webpack发布了新版本v4.0.0,其中做了很多改动,包括0配置以及移除了CommonsChunkPlugin等。由此而来的还有之前webpack3.x的项目如何迁移到新的webpack版本,本文就一个新的vue-cli创建的基于webpack的项目进行迁移。

题外话:不要看0配置是很有噱头,基本是不能满足大部分用户啊的需求,不过加入了更多的默认配置确实也方便了用户,配置相对简单,是一种开箱即用的方式。毕竟之前parcel的0配置确实抢了很多webpack的风头,然后也去弄了一下parcel使用parcel+vue的简单模版工程,有兴趣可以看一下。

一、webpack4的新东西

0. 安装

不在只安装webpack即可,还需要安装一个webpack-cli

全局安装

sudo npm install -g webpack webpack-cli

局部安装(当前文件夹)

npm install --save-dev webpack webpack-cli

1. 0配置

默认的入口为 './src/' 和默认出口 './dist'

对压缩(optimization.minimize)的设置,默认在production时开启,在development时关闭。

默认配置不仅限于上述两项。

2. mode/–mode参数

新增了mode/--mode参数来表示是开发还是生产,mode有两个可选值:development和production,production不支持监听,production侧重于打包后的文件大小,development侧重于构建的速度。

webpack --mode development

也可以在配置文件中配置:

// webpack.config.js
module.exports = {
 mode: "production",
 // ...
}

3. 对uglifyjs升级

在之前的vue脚手架创建的基于webpack的工程,在webpack.prod.conf.js中可以清晰的看到配置中有这么一行:

// UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify

在webpack4.0中已经可以压缩es6代码,如:

class user {
 getUsername() {
  // to do
 }
}

压缩之后为:

详解webpack4升级指南以及从webpack3.x迁移

4. 移除loaders,必须使用rules

在webpack3.x中还保留之前版本的loaders,与rules并存都可以使用,在新版中完全移除了loaders,必须使用rules。

5. sideEffects

在模块的package.js中添加sideEffects:false,当使用export单独导出的时候,不会打包export之外的其他文件,使打包的文件更小。

相关链接:https://github.com/webpack/webpack/tree/master/examples/side-effects

6. webpack4支持多种形式的模块类型,但是有时候可能需要加上type进行配合

如果是CommonJS, AMD, ESM三种类型的模块,使用javascript/auto;

如果是EcmaScript modules(.mjs),使用javascript/esm,其他的模块类型将不生效;

如果只有CommonJS和EcmaScript modules不可用,使用javascript/dynamic;

如果是json类型的文件,允许使用require和import来导入json,使用json;

如果是Webassembly,使用webassembly/experimental —— 官方说是一个实验性的功能。

举个栗子:

rules: [
 {
  test: /\.json$/,
  type: "javascript/auto"
 }
]

7. 支持ES6的方式导入JSON文件,并且可以过滤无用的代码

下面是三种导入json文件的方法:

let jsonData = require('./data.json');

import jsonData from './data.json'

import { first } from './data.json'

其中使用import { first } from './data.json'引入的json文件会忽略没导入的代码,打包时只会将first的打进去。

8. 移除CommonsChunkPlugin,用optimization.splitChunks和optimization.runtimeChunk来代替

这里内容有点多,不做具体介绍,后续可能会出一篇有关optimization.splitChunks的文章,在下面从3.x迁移的时候会有简单介绍,出了上面的新版relesase链接外,下面还推荐几个不错的链接:

RIP CommonsChunkPlugin
medium上的有关移除CommonsChunkPlugin的文章
medium上的有关webpack4更新文章

二、webpack 3.X 迁移到 webpack4.X

1. 更新webpack依赖

npm install -g webpack webpack-cli

npm install --save-dev webpack webpack-cli

2. 更新对应模块

在webpack升级的同时,对应的许多依赖也需要相应的进行升级,下面是在vuec-cli的脚手架中需要的更新;对于其他工程,注意看控制台的报错,是哪个插件报的错就去升级那个插件,如果存在找不到模块之类的错误就去升级对应的loader。

html-webpack-plugin => npm i -D html-webpacl-plugin

webpack-dev-server或者改为webpack-serve => npm i -D webpack-dev-server/npm i -D webpack-serve

vue-loader => npm i -D vue-loader

extract-text-webpack-plugin@next => npm i -D extract-text-webpack-plugin@next

3. 使用mode/–mode

在命令中加入--mode development/ --mode production或者在配置文件中加入mode: 'development'/mode: 'production'。

4. 如果使用CommonsChunkPlugin替换为optimization.splitChunks

使用栗子:

const webpack = require('webpack');

new webpack.optimize.SplitChunksPlugin({
 chunks: "all",
 minSize: 30000,
 minChunks: 1,
 maxAsyncRequests: 5,
 maxInitialRequests: 3,
 name: true,
 cacheGroups: {
  default: {
   minChunks: 2,
   priority: -20,
   reuseExistingChunk: true,
  },
  vendors: {
   test: /[\\/]node_modules[\\/]/,
   priority: -10
  }
 }
})

写在后面

对于webpack的这次升级这里没有一一列举,选了几个相对关键的点,具体可以去看这里;有关从webpack3.x迁移到新版的时候可能还有其他的坑需要慢慢去趟,目前遇到的基本都解决了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

webpack4升级迁移 相关电子书
学习笔记
网友NO.715607

基于webpack4+vue-cli3项目实现换肤功能

起因 最近因公司需求,需要实现主题换肤功能,不仅仅是颜色的更改,还需要包括图片,字体等文件等更换,因此在百度里各种实现方案后,决定根据 scss+style-loader/useable 做换肤。 项目开始 首先我们用 vue-element-admin 这个开源的后台管理系统项目来做demo演示,为了便于做二次开发,下载vue-admin-template来开发。 // 从github下载vue-admin-templateclone https://github.com/PanJiaChen/vue-admin-template.gitcd vue-admin-templatenpm installnpm run dev 运行成功后的效果 安装style-loader处理器 因为 vue-admin-template 项目是添加过 sass-loader 依赖的,所以不用我们再次安装,在上一步就已经安装好了。 npm install style-loader --save-dev 创建主题文件 在src目录下创建 theme-chalk、theme-light 主题文件夹 在两个主题目录下创建index.useable.scss文件  在 index.useable.scss 中写入样式 // theme-chalk/index.useable.scssbody { ba……

网友NO.707842

webpack4.x下babel的安装、配置及使用的知识点总结

前言 目前,ES6(ES2015)这样的语法已经得到很大规模的应用,它具有更加简洁、功能更加强大的特点,实际项目中很可能会使用采用了ES6语法的模块,但浏览器对于ES6语法的支持并不完善。为了实现兼容,就需要使用转换工具对ES6语法转换为ES5语法,babel就是最常用的一个工具。那么在webpack中如何使用babel呢?这是本篇文章要探讨的问题。 写这篇文章的目的还在于最新webpack版本的一些操作方式已经变化、babel也在不断更新,以往的一些资料或者教程已不适合。笔者对webpack最新版4.1.1下使用babel进行了探索,现将结果总结为本文,以下经测试通过可行,读者可参考设置。 文章用例 为更加清楚的进行阐述,本文使用一个案例,如下: 1、项目根目录为webpack-test,当然这个名字可以随意; 2、在项目根目录下,有一个index.js文件,代码如下: 3、index.js所引……

网友NO.966316

基于webpack4从零开始构建react开发环境方法步骤详解

项目文件准备: 执行npm init,然后创建如下图所示的文件。 在index.html里面添加 !DOCTYPE htmlhtml head titleThe Minimal React Webpack Babel Setup/title /head body div id=app/div script src=./bundle.js/script /body/html 在webpack.config.js里面添加 module.exports = { entry: ./src/index.js, output: { path: __dirname + /dist, publicPath: /, filename: bundle.js }, devServer: { contentBase: ./dist }}; 在package.json里面添加 scripts: { start: webpack-dev-server --config ./webpack.config.js --mode development }, 这样,当执行npm start的时候,就会使用webpack-dev-server把index.js相关文件打包,生成bundle.js,这时候浏览器会打开一个窗口,执行index.html(contentBase里面定义了),又因为index.html里面引入了bundle.js,就可以把压缩后的js文件执行起来。当然引入bundle.js这一步可以由我们强大的html-webpack-plugin完成。 安装依赖 npm install --save-dev webpack webpack-dev-server webpack-……

网友NO.906178

webpack4实现不同的导出类型

webpack最基本的配置就是导出一个静态的对象,但是由于我们业务比较复杂,往往需要动态配置webpack以构建目标代码。 幸运的是,webpack为我们提供了动态配置webpack文件的支持。 下面介绍一下webpack的多种配置类型。 1、导出为一个对象(Object) webpack最常见的配置类型为导出一个对象,即 const path = require('path')module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }} 2、导出为一个函数(Function) 很明显,导出为一个对象缺乏灵活性。若我们想要根据不同的开发环境构建不一样的代码。此时,webpack配置也应该随着改变。 所以,webpack支持我们导出一个函数,这个导出函数的默认参数为env和argv。其中,env为环境对象,我们可以通过命令行对其进行配置(webpack可自动读取该配置),argv为命令行输入参数的map。 (1)--env 参数……

网友NO.806701

webpack4.x开发环境配置详解

本文实例讲述了webpack4.x开发环境配置方法。分享给大家供大家参考,具体如下: 写这篇文章的初衷在于,虽然网络上关于webpack的教程不少,但是大多已经过时,由于webpack版本更新后许多操作变化很大,很多教程的经验已经不适合。当我们使用npm安装webpack时,若不指定webpack的版本,将默认安装最新版,笔者测试时默认安装的是4.1.1,并不能照搬老教程的方法。为此,笔者进行了最新版配置的探索,使用的是windows操作系统,如果你的是webpack4.x版本,可参考进行配置。 注意:本文并不是直接把正确步骤放上去,而是分析了各种报错情况及原因,文章的步骤显得绕弯子。如果仅仅想看正确步骤,建议直接看第八点的配置步骤再返回查找各步骤的操作。 一、全局安装webpack 如果我们按照旧版本的安装方式,直接使用npm全局安装webpack,我们预期全局安装w……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com