写本文的目的是记录自己摸索webpack自动构建的过程，有时候我们需要开发一些比较简单的页面的时候，用框架的构建工具有点太 ‘小题大做’，同时也会增加不必要的内存，所以需要一套自己的构建工具，gulp更加强调开发规范，而webpack注重模块化。但在如今，webpack你无法拒绝。本文仅介绍开发环境中webpack的构建的某些用法。

先看下项目目录：

一、入口

    入口推荐使用绝对路径：

entry: __dirname + '/../src/main.js' //__dirname是当前文件所在文件夹目录

或者

const path = require('path');

entry: path.resolve(__dirname, '../src/main.js')

干脆定义个函数：

function resolve(dir) {
  return path.join(__dirname, '..', dir) //返回的是项目目录下的文件
} 
module.exports = {
  entry: resolve('src/main.js')
}

二、出口

    也推荐用上述方法采用绝对路径：

 output: {
    filename: 'bundle.js',
    path: resolve('dist'),
  },

三、module

    定义处理各个模块的规则：

js：

      {
        test: /.js$/,
        exclude: /(node_modules|bower_components)/, //不要处理依赖中的js文件
        include: /src/, //只处理src下的js文件，这样做可以加快匹配速度，提高打包速度
        use: {
          loader: 'babel-loader',
        }
      },

images：

     {
        test: /.(png|jpg|gif)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10000, //小于10kb的图片转为base64
            name: 'static/img/[name].[hash:8].[ext]',
          }
        }]
      },

media：

     {
        test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000, //小于10kb的图片转为base64
          name: 'static/media/[name].[ext]'
        }
      },

fonts：

     {
        test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'static/fonts/[name].[ext]'
        }
      },

css：

//require的依赖要先npm安装
      {
        test: /.(css|less)$/,
        use: [
          'style-loader', 
          'css-loader', 
          {
            loader: require.resolve('postcss-loader'),
            options: {
              ident: 'postcss',
              plugins: () => [
                require('postcss-flexbugs-fixes'),
                autoprefixer({ //这里用了autoprefixer，npm安装并引入
                  browsers: [
                    '>1%',
                    'last 4 versions',
                    'Firefox ESR',
                    'not ie < 9',
                  ],
                  flexbox: 'no-2009',
                }),
              ],
            },
          }, 
          'less-loader' //这里使用了less
        ],
      },

提一下html中的图片处理：

      {
        test: /.(htm|html)$/i,
        use: [{
          loader: 'html-withimg-loader' //插件
        }]
      },

四、mode

webpack4+需要使用这个属性指定开发环境，不然浏览器会发出警告

mode: 'development' //生产环境  'production'

五、HMR模块热替换

devServer: {
    disableHostCheck: true,
    clientLogLevel: 'warning',
    contentBase: '../dist',
    watchContentBase: true,
    hot: true,
    host: 'localhost',
    port: 8080,
    open: true,
    noInfo: true,
    quiet: true,
    stats: {
      colors: true
    }
  },

各属性介绍：webpack开发中[dev-server]

六、plugins

plugins: [
    new webpack.NamedModulesPlugin(), //当开启 HMR 的时候使用该插件会显示模块的相对路径，建议用于开发环境。，webpack4+ mode为development时默认加了这个插件，可以不用写
    new webpack.HotModuleReplacementPlugin(), //启用HMR
    new HtmlWebpackPlugin({ //该插件将为你生成一个 HTML5 文件
      filename: 'index.html',
      template: 'index.html', //本地自定义模板，不然你在index.html中的写的东西会被替换为默认
      inject: true
    }),
  ],
    new CopyWebpackPlugin([ //复制你的静态文件，就是仅仅是复制那些你不需要处理的文件
      {
        from: resolve('static'), //从static中
        to: resolve('dist'), //复制到dist下
        ignore: ['.*']
      }
    ])

七、npm start

在你的package.json文件的scripts中加一个start

    "start": "webpack-dev-server --inline --progress --config config/webpack.dev.conf.js",

npm start 就可以开始你的开发了。生产环境的构建可以看我另一篇博文：webpack构建技巧之生产篇。

完整版本请移步：https://github.com/linxner/webpackENV。

最后附上完整的webpack.dev.conf.js文件：

'use strict'
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');
const CopyWebpackPlugin = require('copy-webpack-plugin');

function resolve(dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: resolve('src/main.js'),
  output: {
    filename: 'bundle.js',
    path: resolve('dist'),
  },
  devtool: "eval-source-map",
  module: {
    rules: [
      {
        test: /.(htm|html)$/i,
        use: [{
          loader: 'html-withimg-loader'
        }]
      },
      {
        test: /.(png|jpg|gif)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: 'static/img/[name].[hash:8].[ext]',
          }
        }]
      },
      {
        test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'static/media/[name].[ext]'
        }
      },
      {
        test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'static/fonts/[name].[ext]'
        }
      },
      {
        test: /.js$/,
        exclude: /(node_modules|bower_components)/,
        include: /src/,
        use: {
          loader: 'babel-loader',
        }
      },
      {
        test: /.(css|less)$/,
        use: [
          'style-loader', 'css-loader', {
            loader: require.resolve('postcss-loader'),
            options: {
              ident: 'postcss',
              plugins: () => [
                require('postcss-flexbugs-fixes'),
                autoprefixer({
                  browsers: [
                    '>1%',
                    'last 4 versions',
                    'Firefox ESR',
                    'not ie < 9',
                  ],
                  flexbox: 'no-2009',
                }),
              ],
            },
          }, 'less-loader'
        ],
      },
    ],
  },
  devServer: {
    disableHostCheck: true,
    clientLogLevel: 'warning',
    contentBase: '../dist',
    watchContentBase: true,
    hot: true,
    host: 'localhost',
    port: 8080,
    open: true,
    noInfo: true,
    quiet: true,
    stats: {
      colors: true
    }
  },
  mode: "development",
  plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html', 
      inject: true
    }),
    new CopyWebpackPlugin([
      {
        from: from: resolve('static'), //从static中
        to: resolve('dist'), 
        ignore: ['.*']
      }
    ])
  ],

}