This article is about the pit and summary of webpack 2.x when learning Vue2

The original link: mrzhang123. Making. IO / 2… Project Address: github.com/MrZhang123….

How do I run the NPM package from the command line after it is installed locally

If NPM install -g is used, you can run the command on the terminal after the installation is complete. However, if NPM install –save-dev is locally installed, You can’t run it that way. So how do you run locally installed packages? First go to the project directory, where package.json is located, and run it using the following command: 




$ node_modules/.bin/<packageName>
Copy the code

In addition to running this on the command line, you can also run it in a file




//index.js

let webpack = require('webpack');

webpack();
Copy the code



$ node index.js
Copy the code

Webpack1. X upgrade 2. X

1.module.loadersChanged tomodule.rules

The old loaders are replaced by new rules that allow the configuration of loaders and much more.



  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: {
          // ...}}}]Copy the code

Rule-loader is short for rule-use: [{loader}].

2. Chain call loaders

In webpack1.x loaders can be chained, and in 2.x loaders can still be chained. Use the rule. Use configuration item to set an array of loaders and use it in 1.x! Connect loaders. The old version only works if you use the old module.loaders.



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

3. Disable automatic addition in modules-loaderThe suffix

-loader is no longer added to WebPack2. x



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

, according to the official to make such changes is omitted – loader can cause misunderstanding to the novice, so remove this function, if you want to go to the function of the old, you can configure the resolveLoader. ModuleExtensions, but not recommended to do so, specific see issues# 2986



+ resolveLoader: {
+   moduleExtensions: ["-loader"] +}Copy the code

4. Configure the Loader using Options

Loader can be configured in Webpack1. x with the custom properties of webpack.config.js, which cannot be done in 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}}}}]Copy the code

Use of the WebPack plug-in

Webpack dev – server1. X upgrade 2. X

1. On the CLI, –inline is enabled by default. You do not need to add it when entering a command

2. Delete contentBase and use proxy instead

3. Reduce console garbage output. In 1.x, the console kept publishing error messages when we stopped the server, but in 2.x only [WDS] Disconnected!

extract-text-webpack-plugin

After vue_spa is packaged with webpack, CSS does not appear because CSS is packaged into build.js. If CSS is extracted from vue components, extract-text-webpack-plugin is required. Only the v2 version can be used. (If WebPack2 is used, the corresponding plug-in version must be v2 version.) The configuration is as follows:



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})].Copy the code

In the options:

Options. Loader: string | object | loader [] (mandatory) the loader (s) used to transform resources for CSS export modules

Options. FallbackLoader: string | object | loader [] when the CSS is not export the loader (s) can be used (i.e. when set in the plugins module allChunks: false)

In the plugins:

Filename: Specifies the path and name of the exported CSS file

AllChunks: extracted from all additional chunks (by default, it is extracted only from the initial chunk)

html-webpack-plugin



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

Title: The document used to generate the document

Filename: HTML file to be injected. The default is index.html. Can be customized (e.g. assets/admin.html)

Inject: true | ‘head’ | | ‘body’ false to the template given resource injection or templateContent, when set to true or ‘body’, all resources will be injected into the body at the bottom. Head puts JS on the headElement

Favicon: Add favicon to the output HTML

Hash: true | false if it is true, it will be a unique webpack compile hash attached to all contain script and CSS files. This is useful for cache clearing.

Cache: true | false if it is true (the default), try to just the documents are sent after the change.

Do I want to replace preset?

Webpack2.x supports ES6 modules by default, so there is no need to convert them to CommonJS modules at compile time, so babel-PREth-ES2015-webpack appears, Cannot remove ‘babel-plugin-transform-es2015-modules-commonjs’ from the plugin list. Babel-preset – ES2015-webpack, babel-preset- ES2015 supports import and export in the module, just set. Babelrc



{"presets": [["es2015"{"modules": false
            }]]}Copy the code

Reference:

What’s new in Webpack Dev Server 2.0