webpack3.x基本配置与总结

基本配置

1.开始之前，请确定你已经安装了当前 Node 的较新版本。

2.然后在文件夹根目录下执行以下命令初始化项目并全局安装webpack：

1.$ cnpm init  // 初始化项目
2.$ cnpm install -g webpack  // 全局安装webpack
3.$ cnpm install webpack --save-dev  // 当前目录安装

3.根目录下新建配置文件webpack.config.js

4.根目录下新建dist文件夹以作为打包后存放目录

5.根目录下新建src文件夹以作为实际项目存放目录

6.根目录下新建index.html作为打包的模板文件

这时整个目录结构应该是下图这样

设置打包命令

package.json文件scripts对象下新增

"webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"

指定webpack --打包的过程 --打包的模块 --字体颜色 --打包的原因

以后打包时候只要运行 cnpm run webpack 就可以执行上面一长串的命令

配置webpack.config.js

module.exports = {}对象中一共有4个属性

一.entry: {}打包入口

可以指定一个或者多个需要打包的js文件，属性是自定义的name，值是需要打包的js文件。

  entry: {
    main: './src/script/main.js',
    a: './src/script/a.js',
    b: './src/script/b.js',
    c: './src/script/c.js'
  },

二.output: {}打包出口

只可指定一个输出配置

  output: {
    // 打包后的文件存放的路径
    path: path.resolve(__dirname, './dist'),
    // 打包后的js文件放到dist/js文件下。需要通过占位符才能打包为多个js文件，否则会依次覆盖文件
    filename: 'js/[name]-[chunkhash].js',
    // 打包后的路径前面加上动态地址
    publicPath: 'http://cdn.com/'
  },

三.plugins: []

1.使用插件 html-webpack-plugin 自动生成html文件

多配置一次 new htmlWebpackPlugin({}) 就多打包一个html文件（也就是所谓多页面应用）

使用方法：

$ cnpm install html-webpack-plugin --save-dev

const htmlWebpackPlugin = require('html-webpack-plugin');

    new htmlWebpackPlugin({
      filename: 'a-[chunkhash].html',// 打包后的htmnl文件名
      template: 'index.html',// 按照根目录模板文件index.html打包
      inject: 'body',// 指定打包好的<script>标签插入的位置
      title: 'aaaaa',// title名 可以在模板中引用
      a: 'bbbb',// 自定义的属性可以在根目录的index.html模板中引用
      minify: { //打包后压缩
        removeComments: true, // 打包后删除注释
        collapseWhitespace: true // 打包后删除空格
      },
      chunks: ['a', 'main'],// 给页面指定要打包的js模块
      excludeChunks: ['b', 'c'],// 除了数组里的js模块都打包
      inlineSource: '.(js|css)$' //js|css全部内嵌进打包页面从而减少http请求( 提高加载性能）
    }),

注意上面的inlineSource: '.(js|css)$'功能需要安装插件 html-webpack-inline-source-plugin

2.使用插件 clean-webpack-plugin 每次打包前删除dist目录

使用方法：

$ cnpm install clean-webpack-plugin --save-dev

const cleanWebpackPlugin = require('clean-webpack-plugin');

new cleanWebpackPlugin(['dist']), // 参数是要清理的目录的字符串数组

3.使用插件 html-webpack-inline-source-plugin 用script标签嵌入的方式，减少http请求( 提高加载性能）

使用方法：

$ cnpm install html-webpack-inline-source-plugin --save-dev

const htmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');

new htmlWebpackInlineSourcePlugin() // 参数是要清理的目录的字符串数组

四. module: {rules: []} //规定在不同模块被创建时如何处理模块的规则数组

1. 转译js文件

安装babel-loader

$ cnpm install babel-loader babel-core babel-preset-env webpack --save-dev

打包后如果报错找不到 babel-template 则安装 cnpm install babel-template --save-dev

      {// 转译js文件
        test: /\.js$/,// 匹配特定文件的正则表达式或正则表达式数组
        include: path.resolve(__dirname, 'src'),// 指定需要转译的文件夹
        exclude: path.resolve(__dirname, 'node_modules'),// 指定转译时忽略的文件夹
        use: {
          loader: 'babel-loader', // 依赖的loader
          options: {
            presets: ['env'] // 最新标准
          }
        }
      },

2. 转译css文件

安装 css-loader style-loader $ cnpm install css-loader style-loader --save-dev

安装 postcss-loader $ cnpm install postcss-loader --save-dev

安装 postcss-import $ cnpm install postcss-import --save-dev //为一些css自动添加兼容浏览器的前缀

      {
        test: /\.css$/,// 匹配特定文件的正则表达式或正则表达式数组
        use: [ // 应用于模块的 loader 使用列表
          'style-loader',
          'css-loader',
          {
            loader:'postcss-loader', // 兼容一些需要写前缀的css并压缩空格
            options: {
              ident: 'postcss',
              plugins: (loader) => [
                require('postcss-import')({ root: loader.resourcePath }),
                require('postcss-cssnext')(),
                require('autoprefixer')(),
                require('cssnano')()
              ]
            }
          }
        ]
      },

3. 转译less文件

安装 less $ cnpm install less --save-dev

安装 less-loader $ cnpm install less-loader --save-dev

      {
        test: /\.less$/,// 匹配特定文件的正则表达式或正则表达式数组
        use: [ // 应用于模块的 loader 使用列表
          'style-loader',
          'css-loader',
          {
            loader:'postcss-loader', // 兼容一些需要写前缀的css并压缩空格
            options: {
              ident: 'postcss',
              plugins: (loader) => [
                require('postcss-import')({ root: loader.resourcePath }),
                require('postcss-cssnext')(),
                require('autoprefixer')(),
                require('cssnano')()
              ]
            }
          },
          'less-loader'
        ]
      },

注意less-loader要放到最前面，处理loader代码是从use:[]数组右边开始

4. 转译sass文件方法同less一样

安装 node-sass $ cnpm install node-sass --save-dev

安装 sass-loader $ cnpm install sass-loader --save-dev

5. 转译html文件

安装 html-loader $ cnpm install html-loader --save-dev

      {// 转译html文件
        test: /\.html$/,
        use: [
          'html-loader'
        ]
      },

6. 转译ejs/tpl文件

安装 ejs-loader $ cnpm install ejs-loader --save-dev

      {// 处理ejs 和 tpl文件 都可以
        test: /\.tpl$/,
        use: [
          'ejs-loader'
        ]
      },

7. 处理写在css中的图片

安装 file-loader $ cnpm install file-loader --save-dev

安装 url-loader $ cnpm install url-loader --save-dev

      {// 处理写在css中的图片
        test: /\.(png|jpg|gif|svg)$/i,
        use: [
          {
            // 将图片处理成base64时候使用
            loader: 'url-loader',
            // loader: 'file-loader',
            options: {
              // 小于2k的图片处理成64编码，大于就交给file-loader处理
              limit: 200,
              // 图片打包后存在assets文件下[名称]-[5位哈希值].[自身文件类型]
              name: 'assets/[name]-[hash:5].[ext]'
            }
          },
          {// 压缩图片 右左顺序放到最前面
            loader: 'image-webpack-loader'
          }
        ]
      }

注意：组件中引入图片必须用这个require方法
<img src="${ require('../../assets/bg.jpg') }">

完整配置文件webpack.config.js

const htmlWebpackPlugin = require('html-webpack-plugin');
const cleanWebpackPlugin = require('clean-webpack-plugin');
const htmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
const path = require('path');
module.exports = {
  entry: {
    main: './src/script/main.js',
    a: './src/script/a.js',
    b: './src/script/b.js',
    c: './src/script/c.js'
  },
  output: {
    // 打包后的文件存放的路径
    path: path.resolve(__dirname, './dist'),
    // 打包后的js文件放到dist/js文件下。需要通过占位符才能打包为多个js文件，否则会依次覆盖文件
    filename: 'js/[name]-[chunkhash].js',
    publicPath: 'http://cdn.com/'// 打包后的路径前面加上动态地址
  },
  plugins: [
    new htmlWebpackPlugin({
      filename: 'a-[chunkhash].html',// 打包后的htmnl文件名
      template: 'index.html',// 按照根目录模板文件index.html打包
      inject: 'body',// 指定打包好的<script>标签插入的位置
      title: 'aaaaa',// title名 可以在模板中引用
      a: 'bbbb',// 自定义的属性可以在根目录的index.html模板中引用
      minify: { //打包后压缩
        removeComments: true, // 打包后删除注释
        collapseWhitespace: true // 打包后删除空格
      },
      chunks: ['a', 'main'],// 给页面指定要打包的js模块
      excludeChunks: ['b', 'c'],// 除了数组里的js模块都打包
      inlineSource: '.(js|css)$' //js|css全部内嵌进打包页面
    }),
    new htmlWebpackPlugin({
      filename: 'b-[chunkhash].html',// 打包后的htmnl文件名
      template: 'index.html',// 指向根目录模板文件
      inject: 'body',// 指定<script>标签插入的位置
      title: 'bbbbbbbb',// title名 可以在模板中引用
      minify: { //打包后压缩
        removeComments: true, // 打包后删除注释
        collapseWhitespace: true // 删除空格
      },
      chunks: ['b'],// 给页面指定要打包的js模块
      excludeChunks: ['a', 'c'],// 除了数组里的js模块都打包
      inlineSource: '.(js|css)$' //js|css全部内嵌进打包页面
    }),
    new htmlWebpackPlugin({
      filename: 'c-[chunkhash].html',// 打包后的htmnl文件名
      template: 'index.html',// 指向根目录模板文件
      inject: 'body',// 指定<script>标签插入的位置
      title: 'ccccccc',// title名 可以在模板中引用
      minify: { //打包后压缩
        removeComments: true, // 打包后删除注释
        collapseWhitespace: true // 删除空格
      }
      chunks: ['c'],// 给页面指定要打包的js模块
      excludeChunks: ['a', 'b'],// 除了数组里的js模块都打包
      inlineSource: '.(js|css)$' //js|css全部内嵌进打包页面
    }),

    // 每次打包删除dist目录
    new cleanWebpackPlugin(['dist']),// 第一个参数是要清理的目录的字符串数组

    // 把页面src引入文件的方式，改成用script标签嵌入的方式，减少http请求( 提高加载性能）
    new htmlWebpackInlineSourcePlugin()
  ],
  module: {
    rules: [// 用于规定在不同模块被创建时如何处理模块的规则数组
      {// 转译js文件
        test: /\.js$/,// 匹配特定文件的正则表达式或正则表达式数组
        include: path.resolve(__dirname, 'src'),// 指定需要转译的文件夹
        exclude: path.resolve(__dirname, 'node_modules'),// 指定转译时忽略的文件夹
        use: {
          loader: 'babel-loader', // 依赖的loader
          options: {
            presets: ['env'] // 最新标准
          }
        }
      },
      {
        test: /\.css$/,// 匹配特定文件的正则表达式或正则表达式数组
        use: [ // 应用于模块的 loader 使用列表
          'style-loader',
          'css-loader',
          {
            loader:'postcss-loader', // 兼容一些需要写前缀的css并压缩空格
            options: {
              ident: 'postcss',
              plugins: (loader) => [
                require('postcss-import')({ root: loader.resourcePath }),
                require('postcss-cssnext')(),
                require('autoprefixer')(),
                require('cssnano')()
              ]
            }
          }
        ]
      },
      {
        test: /\.less$/,// 匹配特定文件的正则表达式或正则表达式数组
        use: [ // 应用于模块的 loader 使用列表
          'style-loader',
          'css-loader',
          {
            loader:'postcss-loader', // 兼容一些需要写前缀的css并压缩空格
            options: {
              ident: 'postcss',
              plugins: (loader) => [
                require('postcss-import')({ root: loader.resourcePath }),
                require('postcss-cssnext')(),
                require('autoprefixer')(),
                require('cssnano')()
              ]
            }
          },
          'less-loader'
        ]
      },
      {// 转译html文件
        test: /\.html$/,
        use: [
          'html-loader'
        ]
      },
      {// 转译ejs/tpl文件
        test: /\.tpl$/,
        use: [
          'ejs-loader'
        ]
      },
      {// 处理写在css中的图片
        test: /\.(png|jpg|gif|svg)$/i,
        use: [
          {
            // 将图片处理成base64时候使用
            loader: 'url-loader',
            // loader: 'file-loader',
            options: {
              // 小于2k的图片处理成64编码，大于就交给file-loader处理
              limit: 200,
              // 图片打包后存在assets文件下[名称]-[5位哈希值].[自身文件类型]
              name: 'assets/[name]-[hash:5].[ext]'
            }
          },
          {// 压缩图片 右左顺序放到最前面
            loader: 'image-webpack-loader'
          }
        ]
      }
    ]
  }
}

模块组成示意图