webpack从入门到放弃

安装

由于webpack依赖node环境，所以在安装webpack之前需要先安装Node！

Node下载地址

这里我就使用局部方法安装webpage 3.6.0版本，如下：

npm install --save-dev webpack@3.6.0
node_modules/.bin/webpack -v    //查看版本
npm init    //初始化项目

然后新建src、dist文件夹与index.html文件，并在src文件夹里新建main.js、math.js，如下图所示：

打包命令如下：

node_modules/.bin/webpack ./src/main.js ./dist/bundle.js

打包

配置webpack.config.js文件来便捷命令打包

在根目录创建名为webpack.config.js的文件

内容如下：

const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

然后直接输入以下命令即可完成打包：

node_modules/.bin/webpack

配置package.json文件来便捷命令打包

在package.json中添加如下代码：

  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
+   "build": "webpack"
  },

然后输入以下命令即可完成打包：

npm run build

loaders

处理CSS文件

安装css-loader、style-loader模块

npm install --save-dev css-loader
npm install style-loader --save-dev

编辑main.js文件，添加如下代码：

require('./css/normal.css')   // 依赖css文件

编辑webpack.config.js文件，添加如下代码：

module: {
    rules: [
      {
        test: /.css$/,
        // 多个loader时，从右向左读取
        use: ['style-loader', 'css-loader']
      }
    ]
  }

然后执行npm run build即可！

处理less文件

安装less-loader模块

npm install --save-dev less-loader less

编辑main.js文件，并在末尾添加如下代码：

require('./css/special.less')   // 依赖less文件

编辑webpack.config.js文件，添加如下代码：

module: {
    rules: [
      {
        test: /.css$/,
        // 多个loader时，从右向左读取
        use: ['style-loader', 'css-loader']
      },
+     {
+       test: /.less$/,
+       use: [{
+         loader: "style-loader"
+       }, {
+         loader: "css-loader"
+       }, {
+         loader: "less-loader"
+       }]
+     }
    ]
  }

然后执行npm run build即可！

加载和转译sass/scss文件同理，参考地址：webpack loader 样式

处理图片文件

安装url-loader模块

npm install --save-dev url-loader

编辑webpack.config.js文件，添加如下代码：

{
  test: /.(png|jpg|gif)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 30000
      }
    }
  ]
}

加载图片时，如果图片大小×1024小于limit，图片将编译成base64字符串形式

如果图片大小×1024大于limit，此时需要使用模块file-loader，步骤如下：

安装file-loader模块

npm install --save-dev file-loader

安装完成后，执行build后会发现并没有生效，是因为打包后图片路径问题，需要编辑webpack.config.js文件，添加一行如下代码即可解决：

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
+   publicPath: './dist/'
  },

打包完成后，我们又发现打包后的图片是直接存储在dist文件夹下的，图片名也是杂乱的，这样很不利于后期的维护与开发，因此需要将图片打包存储在dist/img/文件夹下，并且将图片文件名更改为易懂的名字！！

编辑webpack.config.js文件，添加如下代码：

{
  test: /.(png|jpg|gif)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 30000,
+       name: 'img/[name].[hash:8].[ext]'
      }
    }
  ]
}

最后我们可以看到项目的目录是这样的：

使用babel来实现ES6转ES5

安装babel-loader、babel-core、babel-preset-env模块

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

编辑webpack.config.js文件，添加如下代码：

module: {
  rules: [
    {
      test: /.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['es2015']
        }
      }
    }
  ]
}

最后执行npm run build即可！

Vue

使用并配置Vue

安装vue

npm install --save vue

然后在main.js里添加如下测试代码：

import Vue from 'vue'
const app = new Vue({
  el: '#app',
  data: {
    message: 'hello vue'
  }
})

并在html添加如下代码：

<div id="app">
  <h2>hello world</h2>
  <h2>{{message}}</h2>
</div>

打包后会发现页面没有任何显示，打开控制台后发现如下报错：

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

解决办法：

编辑webpack.config.js文件，添加如下代码：

module.exports = {
   entry: './src/main.js',
   output: {...
   },
   module: {...
   },
+  resolve: {
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js'
+    }
+  }
}

最后执行npm run build即可！

处理.vue文件

安装vue-loader、vue-template-compiler模块

npm install --save-dev vue-loader vue-template-compiler

编辑webpack.config.js文件，添加如下代码：

module: {
  rules: [
+     {
+       test: /.vue$/,
+       use: ['vue-loader']
+     }
  ]
}

在main.js中添加如下代码：

import Vue from 'vue'
import App from './vue/App.vue'

new Vue({
  el: '#app',
  template: "<App></App>",
  components: {
    App
  }
})

新建src/vue/App.vue文件，目录结构如下：

编辑App.vue文件，添加如下代码：

<template>
  <div>
    <h2 class="color">hello world</h2>
    <button>按钮</button>
    <h2>{{message}}</h2>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      message: "hello vue!!!"
    };
  }
};
</script>

<style scoped>
.color {
  color: orange;
}
</style>

执行npm run build后会发现报错，报错信息大概如下：

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

此时编辑package.json文件，将vue-loader改为如下版本：

"vue-loader": "^13.0.0",

保存后，执行如下命令就解决了：

npm install
npm run build

vue组件的使用

新建src/vue/Button.vue文件，目录结构如下：

编辑Button.vue文件，添加如下代码：

<template>
  <div>
    <button>这是button组件</button>
  </div>
</template>

<script>
export default {
  name: "Button"
};
</script>

<style>
</style>

接下来编辑App.vue文件，做如下更改：

<template>
  <div>
    <h2 class="color">hello world</h2>
    <button>按钮</button>
    <h2>{{message}}</h2>
+   <Button></Button>
  </div>
</template>

<script>
+   import Button from "./Button.vue";

    export default {
      name: "App",
+     components: {
+       Button
+     },
      data() {
        return {
          message: "hello vue!!!"
        };
      }
    };
</script>

<style scoped>
.color {
  color: orange;
}
</style>

最后执行npm run build即可！

如果我们在App.vue文件中：

import Button from "./Button.vue";

上面代码末尾的.vue去掉简写打包的话，就会出现报错。

此时如果想简写，又想不报错，在webpack.config.js文件，添加如下代码即可解决：

  resolve: {
+   extensions: ['.css', '.js', '.vue'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }

Plugins

BannerPlugin

作用：添加版权信息。

编辑webpack.config.js文件，添加如下代码：

    const path = require('path')
+   const webpack = require('webpack')

    module.exports = {
      entry: './src/main.js',
+     plugins: [
+       new webpack.BannerPlugin(`最终版权归LqZww所有！`)
+     ]
    }

打包后即可在js文件里的头部看见所写的版权信息！

HtmlWebpackPlugin

作用：打包后可以在dist目录下自动生成index.html文件，也可以将打包的js文件自动通过script标签插入body中。

安装html-webpack-plugin

npm install --save-dev html-webpack-plugin

编辑webpack.config.js文件，增删如下代码：

    const path = require('path')
    const webpack = require('webpack')
+   const HtmlWebpackPlugin = require('html-webpack-plugin')

    module.exports = {
      entry: './src/main.js',
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
-       publicPath: './dist/'
      },
      plugins: [
        new webpack.BannerPlugin(`最终版权归LqZww所有！`),
+       new HtmlWebpackPlugin({
+         template: 'index.html'
+       })
      ]
    }

打包后就可以在dist目录下看见index.html文件，如下：

UglifyjsWebpackPlugin

作用：对打包的js文件进行压缩。

这里使用1.1.1版本，与cli2一致。

安装uglifyjs-webpack-plugin

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

编辑webpack.config.js文件，添加如下代码：

    const path = require('path')
    const webpack = require('webpack')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
+   const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')

    module.exports = {
      entry: './src/main.js',
      plugins: [
        new webpack.BannerPlugin(`最终版权归LqZww所有！`),
        new HtmlWebpackPlugin({
          template: 'index.html'
        }),
+       new UglifyjsWebpackPlugin()
      ]
    }

打包后就可以发现dist目录下的js文件是进行了压缩。

webpack-dev-server

作用：实现实时重新加载功能

安装webpack-dev-server

npm install --save-dev webpack-dev-server@2.9.3

编辑webpack.config.js文件，添加如下代码：

    module.exports = {
      entry: './src/main.js',
      output: {
      },
      module: {
      },
      resolve: {
      },
      plugins: [
      ],
+     devServer: {
+       contentBase: './dist',
+       inline: true
+     }
    }

运行方法一：

在命令行里输入命令：

./node_modules/.bin/webpack-dev-server

然后默认直接访问http://localhost:8080/即可！

运行方法二：

编辑package.json文件，添加如下代码：

  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack",
+   "dev": "webpack-dev-server --open"
  },

然后在命令行里输入下列命令：

npm run dev

我们就会看到浏览器自动加载页面，更改代码后将自动重新加载。

配置文件分离

安装webpack-merge

npm install --save-dev webpack-merge

创建build文件夹，然后新建common.config.js、dev.config.js、prod.config.js文件，删除webpack.config.js文件，目录结构如图：

原webpack.config.js文件内容为：

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /.css$/,
        // 多个loader时，从右向左读取
        use: ['style-loader', 'css-loader']
      },
      {
        test: /.less$/,
        use: [{
          loader: "style-loader"
        }, {
          loader: "css-loader"
        }, {
          loader: "less-loader"
        }]
      },
      {
        test: /.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 30000,
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      },
      {
        test: /.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.css', '.js', '.vue'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  plugins: [
    new webpack.BannerPlugin(`最终版权归LqZww所有！`),
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
    new UglifyjsWebpackPlugin()
  ],
  devServer: {
    contentBase: './dist',
    inline: true
  }
}

现将原webpack.config.js代码拷贝至common.config.js中，并删除devServer、UglifyjsWebpackPlugin模块代码。

再将devServer提取到dev.config.js文件中，将UglifyjsWebpackPlugin提取到prod.config.js文件中。

具体代码如下：

common.config.js：

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /.css$/,
        // 多个loader时，从右向左读取
        use: ['style-loader', 'css-loader']
      },
      {
        test: /.less$/,
        use: [{
          loader: "style-loader"
        }, {
          loader: "css-loader"
        }, {
          loader: "less-loader"
        }]
      },
      {
        test: /.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 30000,
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      },
      {
        test: /.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.css', '.js', '.vue'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  plugins: [
    new webpack.BannerPlugin(`最终版权归LqZww所有！`),
    new HtmlWebpackPlugin({
      template: 'index.html'
    })
  ]
}

prod.config.js：

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
const WebpackMerge = require('webpack-merge')
const commonConfig = require('./common.config')

module.exports = WebpackMerge(commonConfig, {
  plugins: [
    new UglifyjsWebpackPlugin()
  ]
})

dev.config.js：

const WebpackMerge = require('webpack-merge')
const commonConfig = require('./common.config')

module.exports = WebpackMerge(commonConfig, {
  devServer: {
    contentBase: './dist',
    inline: true
  }
})

再修改下webpack.config.js文件，修改如下代码：

    module.exports = {
      entry: './src/main.js',
      output: {
-       path: path.resolve(__dirname, 'dist'),
+       path: path.resolve(__dirname, '../dist'),
        filename: 'bundle.js'
      },

还需要修改package.json文件，修改如下代码：

  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
-   "build": "webpack",
+   "build": "webpack --config ./build/prod.config.js",
-   "dev": "webpack-dev-server --open"
+   "dev": "webpack-dev-server --open --config ./build/dev.config.js"
  },

做完以上的配置，就可以顺序的执行npm run build、npm run dev命令了！

参考

webpack loader

webpack plugin

webpack-dev-server

环境配置

配置源码