webpack2

1.创建webpack-demo
2.npm init -y
3.npm i webpack webpack-cli -D
4.根目录下创建一个 config>webpack.config.js 文件和一个src> main.js 文件
然后打开 webpack.config.js ，进行webpack的配置：

const path = require('path')

let config = {
  mode: 'none',
  entry: {
    main: path.join(__dirname, './src/main.js')
  },
  output: {
    filename: '[name].bundle.js',
    path: path.join(__dirname, './dist')
  }
}

module.exports = config

接下来打开 package.json 文件，来编写一条命令执行webpack的打包。在 script 中添加：

"build": "webpack --config config/webpack.config.js --progress --colors"

webpack3

npm install --save-dev html-webpack-plugin //自动生成html文件
npm install clean-webpack-plugin --save-dev //清理dist文件

在webpack.config.js 中使用：

const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

在 plugins 中加入：

new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
      template: path.join(__dirname, '../index.html'),
      inject: true,
      minify: {
        removeComments: true
      },
      hash: true
    })

webpack4&5

webpack 无法解析 .ejs 文件，因此我们需要安装对应的 loader：
webpack 无法解析 .css 文件，因此安装 css-loader 和 style-loader：
webpack 无法解析 img 文件，因此安装对应的 loader
webpack 无法解析 less文件，因此安装 less-loader：

npm i ejs-loader -D
npm i css-loader style-loader -D
npm i url-loader file-loader -D
npm i less-loader -D

并修改 webpack.config.js 添加 module 属性：

module: {
    rules: [
      {
        test: /.ejs$/,
        use: ['ejs-loader']
      },
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /.(jpg|jpeg|png|gif|svg)$/,
        use: 'url-loader'
      },
     {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  },

webpack9

webpack-dev-server是一个简单的小型的web服务器，并且能够实时重载，配置也很简单，首先安装：

npm install --save-dev webpack-dev-server
npm install --save-dev cross-env
npm run dev

构建生产环境;我们先从安装 webpack-merge 开始，用来合并webpack配置项：

npm install --save-dev webpack-merge

webpack.config.js配置生产环境跟开发环境的url输出

const webpack = require('webpack')
plugins: [
new webpack.DefinePlugin({
          'process.env': {
          NODE_ENV : isDev ? '"www.development.com"' : '"www.production.com"'
      }
    })
]

修改package.json的命令：

"dev": "cross-env NODE_ENV=development webpack-dev-server --config config/webpack.dev.js",
"build": "cross-env NODE_ENV=production webpack --config config/webpack.build.js --progress --inline --colors"

页面main.js获取值

console.log(process.env.NODE_ENV)