Webpack2.x踩坑与总结

本篇为在学习Vue2.x的时候使用Webpack2.x的踩坑与总结,关于Vue2.x的踩坑与总结,点击链接

原文链接:http://mrzhang123.github.io/2...
项目地址:https://github.com/MrZhang123...

本地安装npm包后如何在命令行运行

在npm安装包的时候,如果使用全局安装,即npm install <packageName> -g,则在安装完成后可以在终端运行作为命令去运行,但是如果是本地安装的包npm install --save-dev <packageName>,则无法这样直接运行。那么如何运行本地安装的包呢?首先进入项目目录(即package.json所在目录),然后使用以下命令即可运行:


$ node_modules/.bin/<packageName>

除了可以这样在命令行运行外,还可以在文件中运行


//index.js

let webpack = require('webpack');

webpack();

$ node index.js

webpack1.x升级2.x

1.module.loaders改成了module.rules

旧的loaders被新的rules取代,后者允许配置loader以及其他更多项。

  module: {
-   loaders: [
+   rules: [
      {
        test: /\.css$/,
-       loaders: [
+       use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
-           query: {
+           options: {
              modules: true
            }
        ]
      },
      {
        test: /\.jsx$/,
        loader: "babel-loader", // Do not use "use" here
        options: {
          // ...
        }
      }
    ]
  }

以上写法中,Rule.loaderRule.use: [ { loader } ]的简写。

2.链式调用loaders

在webpack1.x中loaders可以链式调用,在2.x中依旧有该特性,使用rule.use配置项,use中设置一个loaders的数组而在1.x中使用!连接各个loader,旧版写法只有在使用旧的module.loaders时有效。

  module: {
-   loaders: {
+   rules: {
      test: /\.less$/,
-     loader: "style-loader!css-loader!less-loader"
+     use: [
+       "style-loader",
+       "css-loader",
+       "less-loader"
+     ]
    }
  }

3.取消在模块中自动添加-loader后缀

webpack2.x中不再添加-loader

  module: {
    rules: [
      {
        use: [
-         "style",
+         "style-loader",
-         "css",
+         "css-loader",
-         "less",
+         "less-loader",
        ]
      }
    ]
  }

根据官方说法,做出这样更改的原因是省略-loader会对新手造成误解,所以去掉这个功能,如果想打开这个旧的功能,可以配置resolveLoader.moduleExtensions,但是并不推荐这么做,具体参阅issues#2986

+ resolveLoader: {
+   moduleExtensions: ["-loader"]
+ }

4.使用options配置loader

在webpack1.x中可以通过webpack.config.js的自定义属性来配置loader,这在webpack2.x中无法执行

module.exports = { 
  ...
  module: { 
    use: [{ 
      test: /\.tsx?$/,
      loader: 'ts-loader'
    }]
  },
  // does not work with webpack 2
  ts: { transpileOnly: false } 
}
//webpack2 use options
module.exports = { 
  ...
  module: { 
    use: [{ 
      test: /\.tsx?$/,
      loader: 'ts-loader'
      options:  { transpileOnly: false }
    }]
  }
}

webpack插件的使用

webpack-dev-server1.x升级2.x

1.在CLI使用的时候,--inline默认开启,无需在输入命令时添加

2.删除contentBase用proxy代替

3.减少控制台无用输出,在1.x中,当我们停掉服务器后,控制台会一直输出错误信息,但是在2.x中只会输出[WDS] Disconnected!

extract-text-webpack-plugin

在使用webpack将vue_spa打包后,并不会出现css,因为css被打包入build.js,如果从vue组件中抽离出css,需要安装插件extract-text-webpack-plugin,在使用的时候需要配合v2版本的才可以使用(如果使用了webpack2,则对应的插件版本都需要用v2版本)。具体配置如下:

module:{
  rules:[
    {
      test: /\.vue$/,
      loader: 'vue',
      options: {
        loaders:{
          css: extractTextPlugin.extract({
            loader: 'css-loader',
            fallbackLoader: 'vue-style-loader'
          })
        }
      }
    }
  ]
},
plugins: [
  new webpack.HotModuleReplacementPlugin(),
  new extractTextPlugin({
    filename:'/style.css',
    allChunks:true
  })
],

在options中:

options.loader: string | object | loader[] (必填项) 这里的 loader(s) 用于将资源转换为css导出模块

options.fallbackLoader: string | object | loader[] 当css没有被导出的时候这里的 loader(s) 会被使用 (即当在plugins模块中设置allChunks:false的时候)

在plugins中:

filename:可以设置被导出的css文件的路径以及名字

allChunks:从所有附加块中提取(默认情况下,它只从初始块中提取)

html-webpack-plugin

plugins: [
  new htmlWwebpackPlugin({
    filename: 'assets/admin.html'
  }),
]

title:用于生成文档的document

filename:要注入的html文件,默认为index.html。可以自定义(例如:assets/admin.html)

inject:
true | ‘head’ | ‘body’ | false
将资源注入所给的template或templateContent,当设置为 true 或者 ‘body’,所有的资源会被注入到body底部。而head则会将js放到headelement

favicon: 在输出的html中添加favicon

hash: true | false 如果为true,则将一个唯一的webpack编译散列附加到所有包含的脚本和CSS文件。这对缓存清除很有用。

cache: true | false 如果为true(默认),尝试仅在更改后才发出文件。

是否要更换preset?

webpack2.x默认支持es6的模块,所以在编译时候没有必要将它们先转换为CommonJS模块再处理,所以在github中出现了babel-preset-es2015-webpack,但是这个模块我在使用的时候出现了Cannot remove 'babel-plugin-transform-es2015-modules-commonjs' from the plugin list.的问题,根据babel-preset-es2015-webpack中的叙述以及issues#14可知,babel-preset-es2015已经支持不转换模块中的importexport,只需要设置.babelrc

{
    "presets": [
        [
            "es2015",
            {
                "modules": false
            }
        ]
    ]
}

参考:

从 webpack v1 迁移到 webpack v2
What’s new in webpack dev server 2.0


前端技术
记录一些自己学到的东西,一起学习,共同进步

热爱生活,追求技术

2.4k 声望
194 粉丝
0 条评论
推荐阅读
RN Webview与Web的通信与调试
RN 在 0.37 版本中加入了WebView功能,所以想要在使用WebView,版本必须&gt;=0.37,发送的 message 只能是字符串,所以需要将其他格式的数据转换成字符串,在接收到后再转换回去,其实直接用JSON.stringify和JSON....

枫s的思念1阅读 8.4k评论 1

WebPack面试题汇总
现在的前端网页功能丰富,特别是SPA(single page web application 单页应用)技术流行后,JavaScript的复杂度增加和需要一大堆依赖包,还需要解决Scss、Less……新增样式的扩展写法的编译工作。Webpack 最核心的功...

xiangzhihong7阅读 370

想弄懂Babel?你必须得先弄清楚这几个包
相信很多人都知道Babel,知道它是用来编译ES6+的东西。但是再深入一点,大家都清楚我们平时项目中Babel用到的那些包作用是什么吗?为什么要用那几个包?

limingcan1阅读 604

封面图
前端微服务跨域配置解决办法,devServer为例
前言Nginx: 在上一篇我提到的跨域配置是正式上线的时候使用nginx做为配置的参考。Webpack: 而我们更多的时候是在开发阶段就需要通过跨域进行联合开发各个子应用部分功能DevServer配置解决跨域子应用静态资源跨域...

smallStone1阅读 1.1k评论 5

macOS上HBuildX 开发 uni-app项目,运行调试时编辑保存文件不会自动编译更新页面
点击运行到"Chrome",HBuildX能够正常编译并打开浏览器正常显示网页,这个时候如果去修改代码并保存,HBuildX底部控制台并不会出现重新编译的字样(正常是有的),浏览器也不会自动刷新,同时手动刷新变动的内容...

RobinTang阅读 887

alicdn边缘节点不稳定导致页面崩溃问题
某工作日,线上某用户向客服专员反馈没法正常访问“查看报价页面”,页面内容没有呈现。客服专员收到反馈后,将问题转交给SRE处理。很奇怪的是,SRE访问生产环境“查看报价页面”显示正常,为了进一步分析定位问题,S...

记得要微笑阅读 748

Transpile Webpack Plugin:让 Webpack 按照源文件的目录结构输出
作为 Web 开发者,你是否也纠结过如何用 Webpack 做文件转译?就像 Babel CLI 转译文件那样按照源文件的目录结构输出?如果有,那么这篇文章就是为你而写,我们一起瞧一瞧怎么做吧。

乌柏木5阅读 740

热爱生活,追求技术

2.4k 声望
194 粉丝
宣传栏