详解webpack4 升级迁移

  • 时间:
  • 1321人关注

这篇文章主要介绍了webpack 4 升级迁移的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,另外这篇文章主要知识点是关于webpack4、升级迁移、webpack4升级迁移的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子资料:

教程详情电子资料
  • 教程类别:webpack4升级迁移
  • 编辑整理:扶霏霏
  • 教程字数:5324字节
  • 阅读时间:大概5分钟
  • 下载本教程(DOC版)
  • 好久不看 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"
     }
    }
    

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

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


    上一篇:wx.request实现后台数据交互功能详解

    下一篇:解析js中的 || 与 && 运算符

    相关内容

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

      本篇文章主要介绍了详解webpack4升级指南以及从webpack3.x迁移,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

      06-21

      阅读更多
    • JavaScript语言精粹

      JavaScript语言精粹

      JavaScript曾是全世界非常容易误解的言语,由于它肩负过多的特点,包含槽糕的互动和不成功的设计方案,但伴随着Ajax的来临,JavaScript从极受误会的程序语言演化为十分时髦的言语,这除开好

      大小:9.9 MBJavaScript

      点击下载
    • JavaScript网页动画设计

      JavaScript网页动画设计

      JavaScript网页动画设计 由业界先进的动画库Velocity。js的作者所著,书中内容共分为8章,简明扼要地总结了在网页上使用动画的技术技巧,让读者掌握如何有效利用动画实现无与伦比的用户体验

      大小:26 MBJavaScript

      点击下载
    • JavaScript启示录

      JavaScript启示录

      《JavaScript启示录》无关于JavaScript设计模式,也无关于JavaScript面向对象代码实现。《JavaScript启示录》意图通过考察原生JavaScript对象和不同环境对原生对象的支持和细微差别。

      大小:24.4 MBJS

      点击下载
    • Web前端开发精品课 JavaScript基础教程

      Web前端开发精品课 JavaScript基础教程

      《JavaScript基础教程》 共分为2大部分,第1部分是JavaScript基础知识,主要学习JavaScript基础概念如变量、运算符、表达式等。第二部分是JavaScript进阶知识,主要学习DOM、事件操作以及各种开发技

      大小:9.7 MB前端

      点击下载
    • 移动网页设计与开发:HTML5+CSS3+JavaScript

      移动网页设计与开发:HTML5+CSS3+JavaScript

      将落伍的网址打导致更为灵便、友善,而且令其充分运用不一样机器设备和电脑浏览器的与众不同优点。根据《移动网页设计与开发HTML5+CSS3+JavaScript》,您将为投身第一线开发充分准备! *內容

      大小:30.2 MB移动开发

      点击下载
    • JavaScript忍者秘籍

      JavaScript忍者秘籍

      这是由jQuery库创始人编写的一本深入剖析JavaScript语言的书,从不同层次讲述了逐步成为JavaScript高手所需的知识,适合具备一定JavaScript基础知识的读者阅读

      大小:38.6 MBJavaScript

      点击下载
    • 精通JavaScript

      精通JavaScript

      精通JavaScript(第2版) 是iQuery之父的经典之作,是深入学习JavaScript技术的绝佳教材,涵盖了可重用代码、文档对象模型、Ajax、Web生产工具、AngularJS等内容。作者讲解了JavaScript的发展现状、实用技

      大小:33.5 MBJavaScript

      点击下载

    学习笔记