webpac3升级webpack4_webpac3 安装 babel - CSDN
精华内容
参与话题
  • Webpack4 升级全教程

    万次阅读 2018-07-13 17:31:19
    webpack4 发版也有一段时间了,发现 vue-cli 还是基于 webpack3 ,于是想着升级一个项目模板。 这里是升级后的项目,可以直接使用。=> 项目模板在这里,relase@4分之下 整体而言坑还是很...

    webpack4 发版也有一段时间了,发现 vue-cli 还是基于 webpack3 ,于是想着升级一个项目模板。

    这里是升级后的项目,可以直接使用。=> 项目模板在这里,relase@4 分支下

    (最近修改了一个 React 版本的,基于 vue-cli ,可以看看 Module_React_Webpack4,过程比较痛苦,就不贴了)


    整体而言坑还是很多的,但是基本都是一些版本错误,升级一下包的版本大部分都可以解决。

    先是常规的 vue-cli 安装。

    这里写图片描述

    然后 webpack 升级到 4.8.1,安装 webpack-cli 等插件。

    "webpack": "^4.8.1",
    "webpack-cli": "^2.1.3"
    • npm run dev 报错

    这里写图片描述

    这个是因为 webpack 和 webpack-dev-server 版本不兼容导致的,升级一下就好了

    "webpack-dev-server": "^3.1.4",
    • 再次启动,报错
      这里写图片描述
      这里是因为 html-webpack-plugin 版本不兼容导致的,这里去网上搜索的话发现大部份博客都是说执行 yarn add webpack-contrib/html-webpack-plugin -D
      但是我使用的时候作者已经更新版本了,所以直接升级就可以,不需要安装 webpack 官方的替代版本。
    "html-webpack-plugin": "^3.2.0",
    • 然后再次启动
      这里写图片描述

    升级一下 eslint 和 eslint-loader

    "eslint": "^4.19.1",
    "eslint-loader": "^2.0.0",
    // 这里如果直接 npm i -D eslint-loader 的话,升级到的版本是 1.9.0 还是会报错,需要指定版本升级到 2.0 以上
    • 继续
      这里写图片描述

    升级 vue-loader

    "vue-loader": "^15.0.10",
    • 这里再次运行报错会很多
      这里写图片描述

    这里是因为最新版的 vue-loader 需要加一个新的配置 VueLoaderPlugin

    // webpack.dev.conf.js
    // 引入
    const { VueLoaderPlugin } = require('vue-loader')
    
    // 在下面的插件中加入
    plugins: [
        ...
        new VueLoaderPlugin(),
        ...
    ]
    
    
    // webpack.prod.conf.js 文件同样
    // 引入
    const { VueLoaderPlugin } = require('vue-loader')
    
    // 在下面的插件中加入
    plugins: [
        ...
        new VueLoaderPlugin(),
        ...
    ]
    
    • 再次运行
      这里写图片描述

    webpack4 需要指定打包的模式 (mode),指定一下就好,可以在 package.json 的命令中指定,也可以写入配置

    // webpack.dev.conf.js
    const webpackConfig = merge(baseWebpackConfig, {
        mode: 'development',
        module: {...}
    }
    
    
    // webpack.prod.conf.js 
    const webpackConfig = merge(baseWebpackConfig, {
        mode: 'production',
        module: {...}
    }
    • 然后再次运行 npm run dev
      这里写图片描述

    完全没有错误提示,至此, dev 环境的升级就完成了。

    • 然而,运行 npm run build 后。。。

    这里写图片描述
    熟悉的界面又出现了,

    这部分错误是因为 webpack.optimize.CommonsChunkPlugin 已经被弃用,需要使用新的配置 config.optimization.splitChunks

    // webpack.prod.conf.js
    // 在 plugins 同级下添加配置
    ...
    optimization: {
       splitChunks: {
         cacheGroups: {
           vendor: {
             test: /[\\/]node_modules[\\/]/,
             name: 'vendor',
             chunks: 'all'
           },
           manifest: {
             name: 'manifest',
             minChunks: Infinity
           },
         }
       },
     },
     plugins: [...]
    
    // 去掉 plugins 中的这部分代码
    ...
    new webpack.optimize.CommonsChunkPlugin({
       name: 'vendor',
       minChunks (module) {
         // any required modules inside node_modules are extracted to vendor
         return (
           module.resource &&
           /\.js$/.test(module.resource) &&
           module.resource.indexOf(
             path.join(__dirname, '../node_modules')
           ) === 0
         )
       }
     }),
     // extract webpack runtime and module manifest to its own file in order to
     // prevent vendor hash from being updated whenever app bundle is updated
     new webpack.optimize.CommonsChunkPlugin({
       name: 'manifest',
       minChunks: Infinity
     }),
     // This instance extracts shared chunks from code splitted chunks and bundles them
     // in a separate chunk, similar to the vendor chunk
     // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
     new webpack.optimize.CommonsChunkPlugin({
       name: 'app',
       async: 'vendor-async',
       children: true,
       minChunks: 3
     }),
     ...
    
    • 再次打包
      这里写图片描述

    这里是因为官方已经不推荐使用 extract-text-webpack-plugin 提取 css 样式,可以使用 mini-css-extract-plugin 替代
    如果不想改变的话可以升级 extract-text-webpack-plugin

    "extract-text-webpack-plugin": "^4.0.0-beta.0",

    推荐使用 mini-css-extract-plugin

    // 首先安装 "mini-css-extract-plugin": "^0.4.0",
    // 并且去掉 package.json 中的包 "extract-text-webpack-plugin": "^4.0.0-beta.0",
    
    // webpack.base.conf.js
    
    // 去掉 extract-text-webpack-plugin
    // const ExtractTextPlugin = require('extract-text-webpack-plugin')
    
    // 引入
    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    
    // 下面的 generateLoaders 函数更改配置(*中间的为改动部分)
    function generateLoaders (loader, loaderOptions) {
       const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
    
       if (loader) {
         loaders.push({
           loader: loader + '-loader',
           options: Object.assign({}, loaderOptions, {
             sourceMap: options.sourceMap
           })
         })
       }
    
       // Extract CSS when that option is specified
       // (which is the case during production build)
       if (options.extract) {
    
       // ********************
       // 改动在这里
         return [MiniCssExtractPlugin.loader].concat(loaders)
       // ********************
    
       } else {
         return ['vue-style-loader'].concat(loaders)
       }
     }
    
    // webpack.prod.conf.js
    
    // 去掉 extract-text-webpack-plugin
    // const ExtractTextPlugin = require('extract-text-webpack-plugin')
    
    // 引入
    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    
    // 去掉 plugins 里的配置
    new ExtractTextPlugin({
       filename: utils.assetsPath('css/[name].[contenthash].css'),
       allChunks: true,
     }),
    
    // 然后加入新的插件配置
    new MiniCssExtractPlugin({
       filename: utils.assetsPath('css/[name].[contenthash:12].css'),
       allChunks: true,
     }),

    再次打包就可以运行了
    这里写图片描述

    到此 webpack4 已经升级成功了。

    展开全文
  • webpack4+动态导入(按需加载方式)

    千次阅读 2019-03-04 13:40:18
    此文为复习或升级webpack过程中的总结。webpack版本为4.29.5 webpack4+动态导入; 目的:减少包体积,按需加载。常见使用情况有以下3中 1:使用import()的情况 output: { filename: "bundle.js", ...

    此文为复习或升级webpack过程中的总结。webpack版本为4.29.5

    webpack4+动态导入;

    • 目的:减少包体积,按需加载。常见使用情况有以下3中

    1:使用import()的情况

     output: {
            filename: "bundle.js",
            chunkFilename: '[name].[hash:8].js',
            path: path.resolve(__dirname, "dist/js"),
        }
    复制代码

    动态导入时chunkFilename默认情况是数字,0,1....;当我们动态引入import("lodash")的时候;如果想要知道打包以后的文件是lodash而不是0.js,只需要在导入的时候加注释:这样打包的时候就会就会将注释中的webpackChunkName的值替换[name],具体详情参考文档:dynamic-imports

    import(/* webpackPrefetch: true,webpackChunkName: "yourFileName",webpackPreload: true */ 'LoginModal')
    import ( /* webpackChunkName: "yourFileName" */ filePath);
    import ( /* webpackChunkName: "lodash" */ 'lodash').then(({
            default: _
        }) => {
            console.log(_)
        }).catch(error => 'An error occurred while loading the component');
    复制代码

    2:使用require.ensure(dependencies: String[], callback: function(require),errcallback:function(err), chunkName: String);

    //将A单独打包
    require.ensure([],()=>{
        require(A)
    },"bundleA");
    //将A,B打包到一起,而且从主文件束中拆分出来。但只有 b.js 的内容被执行。a.js //的内容仅仅是可被使用,但并没有被输出。
    //想去执行 a.js,我们需要异步地引用它,如 require(‘./a.js’),让它的 JavaScritp 被执行。
    require.ensure([A],()=>{
        require(B)
    },bundleAB)
    复制代码

    3:使用bundle-loader

    output配置
      output: {
            filename: "js/[name].[hash:8].js",
            chunkFilename: 'js/[name].[hash:8].js',
            path: path.resolve(__dirname, "./dist"),
            // publicPath: "./"
        },
    
    
    复制代码

    当name:"[name]"时默认会将所有符合条件的文件单独打包,例如:

    webpack.module.rules配置如下
       {
                    test: /\.bundle(\.js|\.css)$/,
                    use: {
                        loader: "bundle-loader",
                        options: {
                            lazy: true,
                            name: "[name]"
                        }
                    }
                }
    复制代码
    index.js
    import bundle from './agg.bundle.js';
    import bundle2 from '@/bgg.bundle.js';
    复制代码

    会打包出来两个文件,文件名为文件名+此次打包的hash;

    当name:string时

    webpack.module.rules配置如下
       {
                    test: /\.bundle(\.js|\.css)$/,
                    use: {
                        loader: "bundle-loader",
                        options: {
                            lazy: true,
                            name: "my-chunk"
                        }
                    }
                }
    复制代码
    index.js
    import bundle from './agg.bundle.js';
    import bundle2 from '@/bgg.bundle.js';
    复制代码

    会将所有符合条件的文件打包成一个包,包名为my-chunk+此次打包的hash;

    展开全文
  • 在项目中,如果我们的路径结构很复杂,那么我们可能导入其他模块的时候不是很方便,这时候,我们可以配置webpack以配置别名的形式访问 执行eject 在项目中执行 $ npm run eject 这个命令只能执行一次,而且不可...

    在项目中,如果我们的路径结构很复杂,那么我们可能导入其他模块的时候不是很方便,这时候,我们可以配置webpack以配置别名的形式访问

    执行eject

    在项目中执行 $ npm run eject 这个命令只能执行一次,而且不可逆转,它会把react-scripts 封装的一些webpack配置等全部解压到项目目录,项目结构中会多出 config 目录 和 scripts 目录,我们的需要配置的地方就在config 目录中, 其中有两个文件需要需改:webpack.config.dev.jswebpack.config.prod.js 文件,两个文件都是修改的同一处配置。

    修改配置,添加alias别名

    webpack.config.dev.jswebpack.config.prod.js 文件中搜索 alias 关键词,在相关对象中添加一个键值对:'@': paths.appSrc,此时的appSrc 就是项目的src目录

    由于技术栈时时升级,为了防止技术升级造成的无法匹配问题的现象,在此添加版本信息如下:

    "devDependencies": {
      "react-scripts": "^1.1.4"
    },
    "dependencies": {
       "react": "^16.3.2"
    }
    

    此时的版本下执行 $ npm run eject 再修改上面的配置是没有任何问题的

    修改导入文件的写法

    好了,现在我们想要导入 src/pages/home/index.js 只需要把import的路径写成 @/pages/home 就可以了,或者也可以按照相对路径的写法导入,其中这里要说明的一些情况是如果目录中存在index.js可以直接写成目录名称,不需要写全路径,因为如果访问某一目录,它默认找的就是index.js, 就像是上面的写法,我们可以写成 @/pages/home 的形式,也可以写成 @/pages/home/index.js 的形式

    最后总结

    修改完毕,这样以后导入模块就方便多了!

    展开全文
  • 由于针对element-ui的组件样式,我引入了element-theme-chalk 样式,下载完依赖后注入的时候,循序为: import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'; import 'element-theme...

    由于针对element-ui的组件样式,我引入了element-theme-chalk 样式,下载完依赖后注入的时候,循序为:

    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css';
    import 'element-theme-chalk';
    

    导致了在项目打包后element-ui的图标显示不出来,如图:
    在这里插入图片描述
    找了半天,还以为是打包的路径出现问题,结果是图标的样式引入出现问题了。
    将循序该为:

    import ElementUI from 'element-ui'
    import 'element-theme-chalk';
    import 'element-ui/lib/theme-chalk/index.css';
    

    就可以了,原因打包的循序造成的

    展开全文
  • webpack-dev-server版本错误

    千次阅读 2019-06-21 11:01:26
    错误如下: npm ERR! code ELIFECYCLE ... webpack5@1.0.0 dev: webpack-dev-server npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the webpack5@1.0.0 dev script. npm ERR! This is proba...
  • cross-env must have updated its paths, it has "cross-env/dist/bin" not "cross-env/bin/" in package.json (EDIT) ...node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=...
  • 2. npm 版本需要大于 3.0,如果低于此版本需要升级它: 二 安装vue-cli npm install -g vue-cli 安装成功后可以输入vue查看相关命令的使用,输入vue list可以查看vue可以用的模板:   我们这里选择webpack...
  • webpack安装和命令行

    千次阅读 2017-03-01 11:14:38
    1、进入我们的项目目录webpack-test,初始化npmnpm init执行这个命令,会要求我们输入name、version、description等,也可以不填,一路回车。 最后会在目录下生成一个package.json文件(我们现在不介绍这个文件)。...
  • 上午用的旧版本cli,升级新版本,再运行ng serve就报错,@angular/Compiler-cli package war not properly installer.,如下图: 但打印ng -v版本信息,是包含这个package的,如下图: 再次运行ng serve,报了另外...
  • webpack-3 react-router-4 react-15.6 升级记录 模板源码 react16 + react-router4 + webpack开发环境搭建 说明 1. react-router 升级到 4.1.2,API 变化很大,具体API解析,请看这篇文章react-router 4 ...
  • 之前修改公司的运营系统,多年来积累下来的代码使得每次打包构建的时候时间异常漫长,非常难受,一气之下将项目的Webpack从2.x升级到了4.x,原来在Jenkins上一套需要6分钟的流程现在只需2分钟,顿时感到身心舒畅( ̄...
  • 升级webpack4.0遇到的一些问题

    千次阅读 2019-03-20 18:39:46
    问题1 Plugin could not be registered at 'html-webpack-plugin-before-html-processing'. Hook was not found. 解决方案:升级webpack https://medium.com/@hiiamyes/... - npm i webpack@4....
  • ERROR in ./node_modules/_extract-text-webpack-plugin@3.0.2@extract-text-webpack-plugin/dist/loader.js?{"omit":1,"remove":true}!D:/work/nl_web/node_modules/_vue-...
  • 之前学习过webpack3的知识,但是webpack4升级后还是有很多变动的,所以这次重新整理一下webpack4的知识点,方便以后复习。 这次学习webpack4不仅仅要会配置,记住核心API,最好还要理解一下webpack更深层次的知识,...
  • webpack3快速入门

    2018-10-06 00:06:51
    这篇文章是本人学习 webpack3 的笔记总结,现在 webpack 版本已经更新到了4。其中2和3是可以通用的,但是1和其他的两个版本依赖上有些不相容,所以不能一起使用。Webpack1到2最大的升级是tree-shaking,其次是配置...
  • webpack 4 作为零配置模块打包器 webpack 功能强大,具有许多独特的功能,但其中一个难点就是配置文件。 为中型到大型项目提供 webpack 配置并不是什么大问题。 没有它感觉你无法活了。然而,对于小一点的项目来说...
  • 在全局下安装:npm install webpack -g  安装指定版本:npm install webpack@版本号 -g  卸载:npm uninstall webpack -g 查看版本号:webpack -v 4.0以上webpack还要安装webpack-cli npm install ...
  • Webpack 是一款强大的打包工具。目前几乎所有的前端构建和开发都是采用 Webpack 。因为 Webpack 有强大的社区生态,每月 Webpac...
  • Webpack性能优化

    千次阅读 2019-08-27 11:09:54
    Webpack是现在主流的功能强大的模块化打包工具,在使用Webpack时,如果不注意性能优化,有非常大的可能会产生性能问题,性能问题主要分为开发时打包构建速度慢、开发调试时的重复性工作、以及输出文件质量不高等,...
  • 本项目使用的是webpack的MiniCssExtractPlugin进行打包,我看网上很多都是ExtractTextPlugin的解决方法,但是ExtractTextPlugin在webpack4中会有点问题,所以现在基本都是使用MiniCssExtractPlugin。 在buil...
1 2 3 4
收藏数 66
精华内容 26
关键字:

webpac3升级webpack4