一、webpack4.0基础篇2

注意：接上一篇文章《一、webpack4.0基础篇》

 

六、转化es6语法

本节来看一下，怎么在webpack中处理js模块。

我们需要把ES6转换成ES5语法。

安装：

npm install babel-loader @babel/core @babel/preset-env -D

@babel/preset-env就是用来把ES6转换成ES5语法的。 

 src/index.js:

let str = require('./a.js')
console.log(str)
require('./index.css')
require('./index.less')
require('./index.scss')
require('./index.styl')

// ES6语法
let fn = () => {
  console.log('log') // log
}
fn()

在webpack.config.js中进行配置：

// webpack是node写出来的 node的写法

//path是node的内置模块，所以不需要去安装
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 对单独抽离出来的css文件进行压缩。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// 对生成的bundle.js文件进行压缩。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
    // 对单独抽离出来的main.css进行压缩时，
    // 使用到了optimize-css-assets-webpack-plugin插件
    // 因此需要加一个优化项配置
    optimization: {
        minimizer: [
            // 对生成的bundle.js进行压缩
            new UglifyJsPlugin({
                cache: true,
                // 并发打包，一起压缩多个。
                parallel: true,
                sourceMap: true
            }),
            // 对抽离出来的main.css进行压缩
            new OptimizeCSSAssetsPlugin({})
        ]
    },
    devServer: { // 开发服务器的配置
        port: 3000,
        progress: true,   // 编译的进度条
        contentBase: './dist',    // 以dist目录为默认启动目录
        compress: true,     // 自动压缩
        open: true       // 自动打开浏览器，适合懒人
    },
    // 模式：默认有两种，一种叫生产环境production， 一种叫 development
    // production 是经过压缩过的
    // 所以，我们选择 development模式，可以看清打包后的代码
    mode: 'production',
    entry: './src/index.js',  // 入口文件，也就是打包这个js文件
    // 打包的文件位置
    output: {
        // 当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件
        // [hash:8]，只显示8位的hash值
        filename: 'bundle.[hash:8].js',  // 打包出来当然文件名叫 bundle.js
        // resolve() 可以把相对路径解析成绝对路径
        // __dirname 是当前目录
        path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
    },
    // 数组 放着所有的webpack插件
    plugins: [
        // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
        new HtmlWebpackPlugin({
            template: './src/index.html',   // 使用哪个html模板
            filename: 'index.html',         // 打包后也叫做 index.html
            // 压缩这个html文件(主要是对HTML文件进行压缩)
            minify: {
                // 删除这个html文件的双引号
                removeAttributeQuotes: true,
                // 变成一行
                collapseWhitespace: true
            },
            // 加一个hash戳
            hash: true
        }),
        new MiniCssExtractPlugin({
            // 抽离出来的文件叫 main.css
            filename: 'main.css',
        })
    ],
    module: { // 模块
        rules: [
            {
                // 找到所有的js文件
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    // 用babel-loader，需要把ES6转换成ES5语法
                    options: {
                        presets: [
                            // @babel/preset-env 就是用来将ES6转化成ES5语法的
                            '@babel/preset-env'
                        ]
                    }
                }
            },
            // 规则,需要css-loader， 可以处理css文件
            // css-loader 主要用来解析 @import这种语法的
            // 还需要style-loader，它是把css插入到head的标签中
            // loader的用法， 多个loader需要一个数组
            // loader是有顺序的，默认是从右向左执行
            // loader还可以写成 对象方式
            {
                test: /\.css$/,
                use: [
                    // 把样式都抽离成一个单独的css文件，叫main.css
                   MiniCssExtractPlugin.loader,
                    // 给CSS3语法，比如transfrom加上前缀。
                    // 需要新建 postcss.config.js 配置文件
                    // 需要引用 autoprefixer 这个插件
                    'css-loader',
                    'postcss-loader'
                ]
            },
            // 还可以处理less文件
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader', // 解析 @import这种语法的
                    'postcss-loader',
                    'less-loader' // 把less转变为css
                ]
            },
            // 还可能处理 sass stylus,
            // sass 要安装的包 node-sass sass-loader
            // stylus 要安装的包 stylus stylus-loader
            {
                // 找到所有的scss文件
                test: /\.scss$/,
                // 用的loader统一是sass-loader,sass和scss用的都是sass-loader
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader', // 解析 @import这种语法的
                    'postcss-loader',
                    'sass-loader'  // 把scss转变为css
                ]
            },
            {
                // 找到所有的.styl文件
                test: /\.styl$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader', // 解析 @import这种语法的
                    'postcss-loader',
                    'stylus-loader'  // 把stylus转变为css
                ]
            }
        ]
    }
}

运行：

npm run dev

浏览器成功打印出 'log'。

 

七、处理js语法及校验 

1、将ES7的语法(ES7中的类)转换成ES5语法

需要用到 @babel/plugin-proposal-class-properties 这个插件。

安装：

npm install @babel/plugin-proposal-class-properties -D

在 webpack.config.js中进行配置：

// webpack是node写出来的 node的写法

//path是node的内置模块，所以不需要去安装
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 对单独抽离出来的css文件进行压缩。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// 对生成的bundle.js文件进行压缩。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
    // 对单独抽离出来的main.css进行压缩时，
    // 使用到了optimize-css-assets-webpack-plugin插件
    // 因此需要加一个优化项配置
    optimization: {
        minimizer: [
            // 对生成的bundle.js进行压缩
            new UglifyJsPlugin({
                cache: true,
                // 并发打包，一起压缩多个。
                parallel: true,
                sourceMap: true
            }),
            // 对抽离出来的main.css进行压缩
            new OptimizeCSSAssetsPlugin({})
        ]
    },
    devServer: { // 开发服务器的配置
        port: 3000,
        progress: true,   // 编译的进度条
        contentBase: './dist',    // 以dist目录为默认启动目录
        compress: true,     // 自动压缩
        open: true       // 自动打开浏览器，适合懒人
    },
    // 模式：默认有两种，一种叫生产环境production， 一种叫 development
    // production 是经过压缩过的
    // 所以，我们选择 development模式，可以看清打包后的代码
    mode: 'production',
    entry: './src/index.js',  // 入口文件，也就是打包这个js文件
    // 打包的文件位置
    output: {
        // 当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件
        // [hash:8]，只显示8位的hash值
        filename: 'bundle.[hash:8].js',  // 打包出来当然文件名叫 bundle.js
        // resolve() 可以把相对路径解析成绝对路径
        // __dirname 是当前目录
        path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
    },
    // 数组 放着所有的webpack插件
    plugins: [
        // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
        new HtmlWebpackPlugin({
            template: './src/index.html',   // 使用哪个html模板
            filename: 'index.html',         // 打包后也叫做 index.html
            // 压缩这个html文件(主要是对HTML文件进行压缩)
            minify: {
                // 删除这个html文件的双引号
                removeAttributeQuotes: true,
                // 变成一行
                collapseWhitespace: true
            },
            // 加一个hash戳
            hash: true
        }),
        new MiniCssExtractPlugin({
            // 抽离出来的文件叫 main.css
            filename: 'main.css',
        })
    ],
    module: { // 模块
        rules: [
            {
                // 找到所有的js文件
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    // 用babel-loader，需要把ES6转换成ES5语法
                    options: {
                        // 这是一个大插件的集合
                        presets: [
                            // @babel/preset-env 就是用来将ES6转化成ES5语法的
                            '@babel/preset-env'
                        ],
                        // 我们还需要配置一些小插件
                        plugins: [
                            // 将ES7语法转换成ES5语法
                            '@babel/plugin-proposal-class-properties'
                        ]
                    }
                }
            },
            // 规则,需要css-loader， 可以处理css文件
            // css-loader 主要用来解析 @import这种语法的
            // 还需要style-loader，它是把css插入到head的标签中
            // loader的用法， 多个loader需要一个数组
            // loader是有顺序的，默认是从右向左执行
            // loader还可以写成 对象方式
            {
                test: /\.css$/,
                use: [
                    // 把样式都抽离成一个单独的css文件，叫main.css
                   MiniCssExtractPlugin.loader,
                    // 给CSS3语法，比如transfrom加上前缀。
                    // 需要新建 postcss.config.js 配置文件
                    // 需要引用 autoprefixer 这个插件
                    'css-loader',
                    'postcss-loader'
                ]
            },
            // 还可以处理less文件
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader', // 解析 @import这种语法的
                    'postcss-loader',
                    'less-loader' // 把less转变为css
                ]
            },
            // 还可能处理 sass stylus,
            // sass 要安装的包 node-sass sass-loader
            // stylus 要安装的包 stylus stylus-loader
            {
                // 找到所有的scss文件
                test: /\.scss$/,
                // 用的loader统一是sass-loader,sass和scss用的都是sass-loader
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader', // 解析 @import这种语法的
                    'postcss-loader',
                    'sass-loader'  // 把scss转变为css
                ]
            },
            {
                // 找到所有的.styl文件
                test: /\.styl$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader', // 解析 @import这种语法的
                    'postcss-loader',
                    'stylus-loader'  // 把stylus转变为css
                ]
            }
        ]
    }
}

src/index.js:

let str = require('./a.js')
console.log(str)
require('./index.css')
require('./index.less')
require('./index.scss')
require('./index.styl')

// ES6语法
let fn = () => {
  console.log('log')
}
fn()


// 这是ES7的语法
// 需要使用到 @babel/plugin-proposal-class-properties 这个插件
class A {
  a = 1;
}
let a = new A()
console.log(a.a) // 1

运行：

npm run dev

浏览器成功打印出：1

 

2、将ES7中的类的装饰器，转换成ES5语法

ES7的类 需要使用到 @babel/plugin-proposal-class-properties 这个插件
而类的装饰器 需要用到 @babel/plugin-proposal-decorators 这个插件

先使用 @babel/plugin-proposal-decorators，然后再使用 @babel/plugin-prosopal-class-properties

安装：

npm install @babel/plugin-proposal-decorators -D

在src/index.js中写类的装饰器：

let str = require('./a.js')
console.log(str)
require('./index.css')
require('./index.less')
require('./index.scss')
require('./index.styl')

// ES6语法
let fn = () => {
  console.log('log')
}
fn()


// 这是ES7的语法
// ES7的类 需要使用到 @babel/plugin-proposal-class-properties 这个插件
// 而类的装饰器 需要用到 @babel/plugin-proposal-decorators 这个插件
@log // 类的装饰器
class A {
  a = 1;
}
let a = new A()
console.log(a.a) // 1

function log (target) {
  console.log(target, '23')
}

在webpack.config.js中进行配置：

// webpack是node写出来的 node的写法

// path是node的内置模块，所以不需要去安装
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 对单独抽离出来的css文件进行压缩。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 对生成的bundle.js文件进行压缩。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
  // 对单独抽离出来的main.css进行压缩时，
  // 使用到了optimize-css-assets-webpack-plugin插件
  // 因此需要加一个优化项配置
  optimization: {
    minimizer: [
      // 对生成的bundle.js进行压缩
      new UglifyJsPlugin({
        cache: true,
        // 并发打包，一起压缩多个。
        parallel: true,
        sourceMap: true
      }),
      // 对抽离出来的main.css进行压缩
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  devServer: { // 开发服务器的配置
    port: 3000,
    progress: true, // 编译的进度条
    contentBase: './dist', // 以dist目录为默认启动目录
    compress: true, // 自动压缩
    open: true // 自动打开浏览器，适合懒人
  },
  // 模式：默认有两种，一种叫生产环境production， 一种叫 development
  // production 是经过压缩过的
  // 所以，我们选择 development模式，可以看清打包后的代码
  mode: 'production',
  entry: './src/index.js', // 入口文件，也就是打包这个js文件
  // 打包的文件位置
  output: {
    // 当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件
    // [hash:8]，只显示8位的hash值
    filename: 'bundle.[hash:8].js', // 打包出来当然文件名叫 bundle.js
    // resolve() 可以把相对路径解析成绝对路径
    // __dirname 是当前目录
    path: path.resolve(__dirname, 'dist') // 路径必须是一个绝对路径
  },
  // 数组 放着所有的webpack插件
  plugins: [
    // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
    new HtmlWebpackPlugin({
      template: './src/index.html', // 使用哪个html模板
      filename: 'index.html', // 打包后也叫做 index.html
      // 压缩这个html文件(主要是对HTML文件进行压缩)
      minify: {
        // 删除这个html文件的双引号
        removeAttributeQuotes: true,
        // 变成一行
        collapseWhitespace: true
      },
      // 加一个hash戳
      hash: true
    }),
    new MiniCssExtractPlugin({
      // 抽离出来的文件叫 main.css
      filename: 'main.css'
    })
  ],
  module: { // 模块
    rules: [
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          // 用babel-loader，需要把ES6转换成ES5语法
          options: {
            // 这是一个大插件的集合
            presets: [
              // @babel/preset-env 就是用来将ES6转化成ES5语法的
              '@babel/preset-env'
            ],
            // 我们还需要配置一些小插件
            plugins: [
              // 将ES7语法中的类装饰器转换成ES5语法， legacy 是宽松模式
              ['@babel/plugin-proposal-decorators', {'legacy': true}],
              // 将ES7语法中的类转换成ES5语法
              ['@babel/plugin-proposal-class-properties', {'loose': true}]
            ]
          }
        }
      },
      // 规则,需要css-loader， 可以处理css文件
      // css-loader 主要用来解析 @import这种语法的
      // 还需要style-loader，它是把css插入到head的标签中
      // loader的用法， 多个loader需要一个数组
      // loader是有顺序的，默认是从右向左执行
      // loader还可以写成 对象方式
      {
        test: /\.css$/,
        use: [
          // 把样式都抽离成一个单独的css文件，叫main.css
          MiniCssExtractPlugin.loader,
          // 给CSS3语法，比如transfrom加上前缀。
          // 需要新建 postcss.config.js 配置文件
          // 需要引用 autoprefixer 这个插件
          'css-loader',
          'postcss-loader'
        ]
      },
      // 还可以处理less文件
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'less-loader' // 把less转变为css
        ]
      },
      // 还可能处理 sass stylus,
      // sass 要安装的包 node-sass sass-loader
      // stylus 要安装的包 stylus stylus-loader
      {
        // 找到所有的scss文件
        test: /\.scss$/,
        // 用的loader统一是sass-loader,sass和scss用的都是sass-loader
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'sass-loader' // 把scss转变为css
        ]
      },
      {
        // 找到所有的.styl文件
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'stylus-loader' // 把stylus转变为css
        ]
      }
    ]
  }
}

 运行：

npm run dev

浏览器：

成功将ES7的类的装饰器转换成了ES5语法。

 

3、将ES7的生成器转换成ES5语法

使用@babel/plugin-transform-runtime 

安装：

npm install @babel/plugin-transform-runtime -D

// 或者 

npm install @babel/plugin-transform-runtime --save-dev

-D 就是 --save-dev，被写入到devDependencies对象里面去，

-S 就是 --save， 被写入到dependencies 对象里面去。

而package.json文件里面的 devDependencies 和 dependencies 对象有什么区别呢？

devDependencies 里面的插件只用于开发环境，不用于生产环境，而dependencies 是需要发布到生产环境的。

还需要一个插件 @babel/runtime

安装：

npm install --save @babel/runtime

src/a.js:

module.exports = 'hello'

class B {

}

function * gen (params) {
  yield 1
}
console.log(gen().next())

 在webpack.config.js中进行配置：

// webpack是node写出来的 node的写法

// path是node的内置模块，所以不需要去安装
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 对单独抽离出来的css文件进行压缩。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 对生成的bundle.js文件进行压缩。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
  // 对单独抽离出来的main.css进行压缩时，
  // 使用到了optimize-css-assets-webpack-plugin插件
  // 因此需要加一个优化项配置
  optimization: {
    minimizer: [
      // 对生成的bundle.js进行压缩
      new UglifyJsPlugin({
        cache: true,
        // 并发打包，一起压缩多个。
        parallel: true,
        sourceMap: true
      }),
      // 对抽离出来的main.css进行压缩
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  devServer: { // 开发服务器的配置
    port: 3000,
    progress: true, // 编译的进度条
    contentBase: './dist', // 以dist目录为默认启动目录
    compress: true, // 自动压缩
    open: true // 自动打开浏览器，适合懒人
  },
  // 模式：默认有两种，一种叫生产环境production， 一种叫 development
  // production 是经过压缩过的
  // 所以，我们选择 development模式，可以看清打包后的代码
  mode: 'production',
  entry: './src/index.js', // 入口文件，也就是打包这个js文件
  // 打包的文件位置
  output: {
    // 当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件
    // [hash:8]，只显示8位的hash值
    filename: 'bundle.[hash:8].js', // 打包出来当然文件名叫 bundle.js
    // resolve() 可以把相对路径解析成绝对路径
    // __dirname 是当前目录
    path: path.resolve(__dirname, 'dist') // 路径必须是一个绝对路径
  },
  // 数组 放着所有的webpack插件
  plugins: [
    // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
    new HtmlWebpackPlugin({
      template: './src/index.html', // 使用哪个html模板
      filename: 'index.html', // 打包后也叫做 index.html
      // 压缩这个html文件(主要是对HTML文件进行压缩)
      minify: {
        // 删除这个html文件的双引号
        removeAttributeQuotes: true,
        // 变成一行
        collapseWhitespace: true
      },
      // 加一个hash戳
      hash: true
    }),
    new MiniCssExtractPlugin({
      // 抽离出来的文件叫 main.css
      filename: 'main.css'
    })
  ],
  module: { // 模块
    rules: [
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          // 用babel-loader，需要把ES6转换成ES5语法
          options: {
            // 这是一个大插件的集合
            presets: [
              // @babel/preset-env 就是用来将ES6转化成ES5语法的
              '@babel/preset-env'
            ],
            // 我们还需要配置一些小插件
            plugins: [
              // 将ES7语法中的类装饰器转换成ES5语法， legacy 是宽松模式
              ['@babel/plugin-proposal-decorators', {'legacy': true}],
              // 将ES7语法中的类转换成ES5语法
              ['@babel/plugin-proposal-class-properties', {'loose': true}],
               '@babel/plugin-transform-runtime'
            ]
          }
        },
        // 只查找src目录下的js
        include: path.resolve(__dirname, 'src'),
        // 不找node_modules里面的js
        // 排除
        exclude: /node_modules/
      },
      // 规则,需要css-loader， 可以处理css文件
      // css-loader 主要用来解析 @import这种语法的
      // 还需要style-loader，它是把css插入到head的标签中
      // loader的用法， 多个loader需要一个数组
      // loader是有顺序的，默认是从右向左执行
      // loader还可以写成 对象方式
      {
        test: /\.css$/,
        use: [
          // 把样式都抽离成一个单独的css文件，叫main.css
          MiniCssExtractPlugin.loader,
          // 给CSS3语法，比如transfrom加上前缀。
          // 需要新建 postcss.config.js 配置文件
          // 需要引用 autoprefixer 这个插件
          'css-loader',
          'postcss-loader'
        ]
      },
      // 还可以处理less文件
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'less-loader' // 把less转变为css
        ]
      },
      // 还可能处理 sass stylus,
      // sass 要安装的包 node-sass sass-loader
      // stylus 要安装的包 stylus stylus-loader
      {
        // 找到所有的scss文件
        test: /\.scss$/,
        // 用的loader统一是sass-loader,sass和scss用的都是sass-loader
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'sass-loader' // 把scss转变为css
        ]
      },
      {
        // 找到所有的.styl文件
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'stylus-loader' // 把stylus转变为css
        ]
      }
    ]
  }
}

 运行：

npm run dev

4、将ES7的includes语法转换成ES5语法。

需要用到@babel-polyfill 这个插件。

npm install @babel/polyfill --save

src/a.js:

module.exports = 'hello'
require('@babel/polyfill')  // 支持ES7的includes语法

class B {

}

function * gen (params) {
  yield 1
}
console.log(gen().next())


// includes 是ES7的语法
'aaa'.includes('a')

5、校验js代码

需要 eslint-loader 插件。

安装：

npm install eslint eslint-loader --save

可以在 https://eslint.org/demo/ 里面，进行配置，然后下载 .eslintrc.json 文件。

比如：

或者，在项目根目录新建 .eslintrc.json 文件。

.eslintrc.json:

可以查看eslint-loader的配置文档： https://www.npmjs.com/package/eslint-loader。

在webpack.config.js中进行配置：

// webpack是node写出来的 node的写法

// path是node的内置模块，所以不需要去安装
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 对单独抽离出来的css文件进行压缩。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 对生成的bundle.js文件进行压缩。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
  // 对单独抽离出来的main.css进行压缩时，
  // 使用到了optimize-css-assets-webpack-plugin插件
  // 因此需要加一个优化项配置
  optimization: {
    minimizer: [
      // 对生成的bundle.js进行压缩
      new UglifyJsPlugin({
        cache: true,
        // 并发打包，一起压缩多个。
        parallel: true,
        sourceMap: true
      }),
      // 对抽离出来的main.css进行压缩
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  devServer: { // 开发服务器的配置
    port: 3000,
    progress: true, // 编译的进度条
    contentBase: './dist', // 以dist目录为默认启动目录
    compress: true, // 自动压缩
    open: true // 自动打开浏览器，适合懒人
  },
  // 模式：默认有两种，一种叫生产环境production， 一种叫 development
  // production 是经过压缩过的
  // 所以，我们选择 development模式，可以看清打包后的代码
  mode: 'production',
  entry: './src/index.js', // 入口文件，也就是打包这个js文件
  // 打包的文件位置
  output: {
    // 当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件
    // [hash:8]，只显示8位的hash值
    filename: 'bundle.[hash:8].js', // 打包出来当然文件名叫 bundle.js
    // resolve() 可以把相对路径解析成绝对路径
    // __dirname 是当前目录
    path: path.resolve(__dirname, 'dist') // 路径必须是一个绝对路径
  },
  // 数组 放着所有的webpack插件
  plugins: [
    // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
    new HtmlWebpackPlugin({
      template: './src/index.html', // 使用哪个html模板
      filename: 'index.html', // 打包后也叫做 index.html
      // 压缩这个html文件(主要是对HTML文件进行压缩)
      minify: {
        // 删除这个html文件的双引号
        removeAttributeQuotes: true,
        // 变成一行
        collapseWhitespace: true
      },
      // 加一个hash戳
      hash: true
    }),
    new MiniCssExtractPlugin({
      // 抽离出来的文件叫 main.css
      filename: 'main.css'
    })
  ],
  module: { // 模块
    // loader 默认是从右到左， 从下到上执行
    rules: [
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          loader: 'eslint-loader',
          options: {
             enforce: 'pre'   // previous 是之前执行 ，让eslint-loader 强制在之前执行。  post是之后
          }
        }
      },
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          // 用babel-loader，需要把ES6转换成ES5语法
          options: {
            // 这是一个大插件的集合
            presets: [
              // @babel/preset-env 就是用来将ES6转化成ES5语法的
              '@babel/preset-env'
            ],
            // 我们还需要配置一些小插件
            plugins: [
              // 将ES7语法中的类装饰器转换成ES5语法， legacy 是宽松模式
              ['@babel/plugin-proposal-decorators', {'legacy': true}],
              // 将ES7语法中的类转换成ES5语法
              ['@babel/plugin-proposal-class-properties', {'loose': true}],
               '@babel/plugin-transform-runtime'
            ]
          }
        },
        // 只查找src目录下的js
        include: path.resolve(__dirname, 'src'),
        // 不找node_modules里面的js
        // 排除
        exclude: /node_modules/
      },
      // 规则,需要css-loader， 可以处理css文件
      // css-loader 主要用来解析 @import这种语法的
      // 还需要style-loader，它是把css插入到head的标签中
      // loader的用法， 多个loader需要一个数组
      // loader是有顺序的，默认是从右向左执行
      // loader还可以写成 对象方式
      {
        test: /\.css$/,
        use: [
          // 把样式都抽离成一个单独的css文件，叫main.css
          MiniCssExtractPlugin.loader,
          // 给CSS3语法，比如transfrom加上前缀。
          // 需要新建 postcss.config.js 配置文件
          // 需要引用 autoprefixer 这个插件
          'css-loader',
          'postcss-loader'
        ]
      },
      // 还可以处理less文件
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'less-loader' // 把less转变为css
        ]
      },
      // 还可能处理 sass stylus,
      // sass 要安装的包 node-sass sass-loader
      // stylus 要安装的包 stylus stylus-loader
      {
        // 找到所有的scss文件
        test: /\.scss$/,
        // 用的loader统一是sass-loader,sass和scss用的都是sass-loader
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'sass-loader' // 把scss转变为css
        ]
      },
      {
        // 找到所有的.styl文件
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'stylus-loader' // 把stylus转变为css
        ]
      }
    ]
  }
}

八、全局变量引入问题

1、expose-loader

比如，安装jQuery

npm install jquery --save

需要使用到一个插件： expose-loader， 暴露全局的loader，是一个内联的loader。

pre 前面执行的loader， normal 普通的loader， 内联 loader， 后置 post loader。

安装：

npm install expose-loader -D

expose-loader 可以把比如jquery之类的库，暴露到window上

src/index.js:

// import $ from 'jquery'
// console.log($)


// 内联loader
import $ from 'expose-loader?$!jquery'  // 将jquery暴露成一个$
// expose-loader 暴露全局的loader
console.log(window.$)

 2、也可以直接配置到webpack.config.js文件中：

  module: { // 模块
    // loader 默认是从右到左， 从下到上执行
    rules: [
      {
        test: require.resolve('jquery'),
        use: 'expose-loader?$'
      },

然后，src/index.js中引入jquery:

import $ from 'jquery'
console.log(window.$)

运行：

npm run dev

 

3、js文件中不引入jquery，也可以拿到$

需要用到一个webpack的内置插件

src/index.js:

console.log($);  // 在每个模块中注入 $对象

在webpack.config.js中进行配置：

// webpack是node写出来的 node的写法

// path是node的内置模块，所以不需要去安装
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 对单独抽离出来的css文件进行压缩。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 对生成的bundle.js文件进行压缩。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')

// webpack 也是一个模块
let webpack = require('webpack')

module.exports = {
  // 对单独抽离出来的main.css进行压缩时，
  // 使用到了optimize-css-assets-webpack-plugin插件
  // 因此需要加一个优化项配置
  optimization: {
    minimizer: [
      // 对生成的bundle.js进行压缩
      new UglifyJsPlugin({
        cache: true,
        // 并发打包，一起压缩多个。
        parallel: true,
        sourceMap: true
      }),
      // 对抽离出来的main.css进行压缩
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  devServer: { // 开发服务器的配置
    port: 3000,
    progress: true, // 编译的进度条
    contentBase: './dist', // 以dist目录为默认启动目录
    compress: true, // 自动压缩
    open: true // 自动打开浏览器，适合懒人
  },
  // 模式：默认有两种，一种叫生产环境production， 一种叫 development
  // production 是经过压缩过的
  // 所以，我们选择 development模式，可以看清打包后的代码
  mode: 'production',
  entry: './src/index.js', // 入口文件，也就是打包这个js文件
  // 打包的文件位置
  output: {
    // 当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件
    // [hash:8]，只显示8位的hash值
    filename: 'bundle.[hash:8].js', // 打包出来当然文件名叫 bundle.js
    // resolve() 可以把相对路径解析成绝对路径
    // __dirname 是当前目录
    path: path.resolve(__dirname, 'dist') // 路径必须是一个绝对路径
  },
  // 数组 放着所有的webpack插件
  plugins: [
    // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
    new HtmlWebpackPlugin({
      template: './src/index.html', // 使用哪个html模板
      filename: 'index.html', // 打包后也叫做 index.html
      // 压缩这个html文件(主要是对HTML文件进行压缩)
      minify: {
        // 删除这个html文件的双引号
        removeAttributeQuotes: true,
        // 变成一行
        collapseWhitespace: true
      },
      // 加一个hash戳
      hash: true
    }),
    new MiniCssExtractPlugin({
      // 抽离出来的文件叫 main.css
      filename: 'main.css'
    }),
      // 提供插件
    new webpack.ProvidePlugin({
        // 把$用jquery暴露出来
        $: 'jquery'
    })
  ],
  module: { // 模块
    // loader 默认是从右到左， 从下到上执行
    rules: [
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          // 用babel-loader，需要把ES6转换成ES5语法
          options: {
            // 这是一个大插件的集合
            presets: [
              // @babel/preset-env 就是用来将ES6转化成ES5语法的
              '@babel/preset-env'
            ],
            // 我们还需要配置一些小插件
            plugins: [
              // 将ES7语法中的类装饰器转换成ES5语法， legacy 是宽松模式
              ['@babel/plugin-proposal-decorators', {'legacy': true}],
              // 将ES7语法中的类转换成ES5语法
              ['@babel/plugin-proposal-class-properties', {'loose': true}],
              '@babel/plugin-transform-runtime'
            ]
          }
        },
        // 只查找src目录下的js
        include: path.resolve(__dirname, 'src'),
        // 不找node_modules里面的js
        // 排除
        exclude: /node_modules/
      },
      // 规则,需要css-loader， 可以处理css文件
      // css-loader 主要用来解析 @import这种语法的
      // 还需要style-loader，它是把css插入到head的标签中
      // loader的用法， 多个loader需要一个数组
      // loader是有顺序的，默认是从右向左执行
      // loader还可以写成 对象方式
      {
        test: /\.css$/,
        use: [
          // 把样式都抽离成一个单独的css文件，叫main.css
          MiniCssExtractPlugin.loader,
          // 给CSS3语法，比如transfrom加上前缀。
          // 需要新建 postcss.config.js 配置文件
          // 需要引用 autoprefixer 这个插件
          'css-loader',
          'postcss-loader'
        ]
      },
      // 还可以处理less文件
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'less-loader' // 把less转变为css
        ]
      },
      // 还可能处理 sass stylus,
      // sass 要安装的包 node-sass sass-loader
      // stylus 要安装的包 stylus stylus-loader
      {
        // 找到所有的scss文件
        test: /\.scss$/,
        // 用的loader统一是sass-loader,sass和scss用的都是sass-loader
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'sass-loader' // 把scss转变为css
        ]
      },
      {
        // 找到所有的.styl文件
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'stylus-loader' // 把stylus转变为css
        ]
      }
    ]
  }
}

运行：

npm run dev

4、如果在html中外链引入jquery

src/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background: pink;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<!-- 模板 -->
<div>内容区</div>
<div class="scss">scss</div>
<div class="stylus">stylus</div>
</body>
</html>

然后又在src/index.js中引入：

import $ from 'jquery';
console.log($);

我们希望在html文件中外链引入的jquery不参与打包。

在webpack.config.js中进行配置：

// webpack是node写出来的 node的写法

// path是node的内置模块，所以不需要去安装
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 对单独抽离出来的css文件进行压缩。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 对生成的bundle.js文件进行压缩。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')

// webpack 也是一个模块
let webpack = require('webpack')

module.exports = {
  // 对单独抽离出来的main.css进行压缩时，
  // 使用到了optimize-css-assets-webpack-plugin插件
  // 因此需要加一个优化项配置
  optimization: {
    minimizer: [
      // 对生成的bundle.js进行压缩
      new UglifyJsPlugin({
        cache: true,
        // 并发打包，一起压缩多个。
        parallel: true,
        sourceMap: true
      }),
      // 对抽离出来的main.css进行压缩
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  devServer: { // 开发服务器的配置
    port: 3000,
    progress: true, // 编译的进度条
    contentBase: './dist', // 以dist目录为默认启动目录
    compress: true, // 自动压缩
    open: true // 自动打开浏览器，适合懒人
  },
  // 模式：默认有两种，一种叫生产环境production， 一种叫 development
  // production 是经过压缩过的
  // 所以，我们选择 development模式，可以看清打包后的代码
  mode: 'production',
  entry: './src/index.js', // 入口文件，也就是打包这个js文件
  // 打包的文件位置
  output: {
    // 当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件
    // [hash:8]，只显示8位的hash值
    filename: 'bundle.[hash:8].js', // 打包出来当然文件名叫 bundle.js
    // resolve() 可以把相对路径解析成绝对路径
    // __dirname 是当前目录
    path: path.resolve(__dirname, 'dist') // 路径必须是一个绝对路径
  },
  // 数组 放着所有的webpack插件
  plugins: [
    // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
    new HtmlWebpackPlugin({
      template: './src/index.html', // 使用哪个html模板
      filename: 'index.html', // 打包后也叫做 index.html
      // 压缩这个html文件(主要是对HTML文件进行压缩)
      minify: {
        // 删除这个html文件的双引号
        removeAttributeQuotes: true,
        // 变成一行
        collapseWhitespace: true
      },
      // 加一个hash戳
      hash: true
    }),
    new MiniCssExtractPlugin({
      // 抽离出来的文件叫 main.css
      filename: 'main.css'
    }),
      // 提供插件
    new webpack.ProvidePlugin({
        // 把$用jquery暴露出来
        $: 'jquery'
    })
  ],
  // jquery是在html文件中引用的，不进行打包
  externals: {
    jquery: '$'
  },
  module: { // 模块
    // loader 默认是从右到左， 从下到上执行
    rules: [      
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          // 用babel-loader，需要把ES6转换成ES5语法
          options: {
            // 这是一个大插件的集合
            presets: [
              // @babel/preset-env 就是用来将ES6转化成ES5语法的
              '@babel/preset-env'
            ],
            // 我们还需要配置一些小插件
            plugins: [
              // 将ES7语法中的类装饰器转换成ES5语法， legacy 是宽松模式
              ['@babel/plugin-proposal-decorators', {'legacy': true}],
              // 将ES7语法中的类转换成ES5语法
              ['@babel/plugin-proposal-class-properties', {'loose': true}],
              '@babel/plugin-transform-runtime'
            ]
          }
        },
        // 只查找src目录下的js
        include: path.resolve(__dirname, 'src'),
        // 不找node_modules里面的js
        // 排除
        exclude: /node_modules/
      },
      // 规则,需要css-loader， 可以处理css文件
      // css-loader 主要用来解析 @import这种语法的
      // 还需要style-loader，它是把css插入到head的标签中
      // loader的用法， 多个loader需要一个数组
      // loader是有顺序的，默认是从右向左执行
      // loader还可以写成 对象方式
      {
        test: /\.css$/,
        use: [
          // 把样式都抽离成一个单独的css文件，叫main.css
          MiniCssExtractPlugin.loader,
          // 给CSS3语法，比如transfrom加上前缀。
          // 需要新建 postcss.config.js 配置文件
          // 需要引用 autoprefixer 这个插件
          'css-loader',
          'postcss-loader'
        ]
      },
      // 还可以处理less文件
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'less-loader' // 把less转变为css
        ]
      },
      // 还可能处理 sass stylus,
      // sass 要安装的包 node-sass sass-loader
      // stylus 要安装的包 stylus stylus-loader
      {
        // 找到所有的scss文件
        test: /\.scss$/,
        // 用的loader统一是sass-loader,sass和scss用的都是sass-loader
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'sass-loader' // 把scss转变为css
        ]
      },
      {
        // 找到所有的.styl文件
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'stylus-loader' // 把stylus转变为css
        ]
      }
    ]
  }
}

运行：

npm run dev

总结：

有以下几种方式来引入第三方模块，比如jquery。

(1) expose-loader ，暴露到window上。

(2) webpack.providePlugin， 给每个人提供一个$。

(3) 直接引入但是不打包，在webpack.config.js中进行配置。

九、图片处理

如何在webpack中使用图片，并且能让webpack来打包我们的图片。

图片引入有很多种方式：

(1) 在js中创建图片来引入

(2)  在css中引入，比如background()

(3)  在html中通过 <img src="" alt="" />

1、在js中创建图片来引入

src/index.js:

// (1) 在js中创建图片来引入
import logo from './logo.png'  // 把图片引入，返回的结果是一个新的图片地址
let image = new Image()
console.log(logo)
image.src = logo
document.body.appendChild(image)

复制一张图片到src目录，重命名为 logo.png。

需要用到一个插件：

npm install file-loader -D

file-loader 默认会在内部生成一张图片，到src目录下。

并且会把生成的图片的名字返回回来。

在webpack.config.js中进行配置：

// webpack是node写出来的 node的写法

// path是node的内置模块，所以不需要去安装
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 对单独抽离出来的css文件进行压缩。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 对生成的bundle.js文件进行压缩。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  // 对单独抽离出来的main.css进行压缩时，
  // 使用到了optimize-css-assets-webpack-plugin插件
  // 因此需要加一个优化项配置
  optimization: {
    minimizer: [
      // 对生成的bundle.js进行压缩
      new UglifyJsPlugin({
        cache: true,
        // 并发打包，一起压缩多个。
        parallel: true,
        sourceMap: true
      }),
      // 对抽离出来的main.css进行压缩
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  devServer: { // 开发服务器的配置
    port: 3000,
    progress: true, // 编译的进度条
    contentBase: './dist', // 以dist目录为默认启动目录
    compress: true, // 自动压缩
    open: true // 自动打开浏览器，适合懒人
  },
  // 模式：默认有两种，一种叫生产环境production， 一种叫 development
  // production 是经过压缩过的
  // 所以，我们选择 development模式，可以看清打包后的代码
  mode: 'production',
  entry: './src/index.js', // 入口文件，也就是打包这个js文件
  // 打包的文件位置
  output: {
    // 当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件
    // [hash:8]，只显示8位的hash值
    filename: 'bundle.[hash:8].js', // 打包出来当然文件名叫 bundle.js
    // resolve() 可以把相对路径解析成绝对路径
    // __dirname 是当前目录
    path: path.resolve(__dirname, 'dist') // 路径必须是一个绝对路径
  },
  // 数组 放着所有的webpack插件
  plugins: [
    // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
    new HtmlWebpackPlugin({
      template: './src/index.html', // 使用哪个html模板
      filename: 'index.html', // 打包后也叫做 index.html
      // 压缩这个html文件(主要是对HTML文件进行压缩)
      minify: {
        // 删除这个html文件的双引号
        removeAttributeQuotes: true,
        // 变成一行
        collapseWhitespace: true
      },
      // 加一个hash戳
      hash: true
    }),
    new MiniCssExtractPlugin({
      // 抽离出来的文件叫 main.css
      filename: 'main.css'
    })
  ],
  module: { // 模块
    // loader 默认是从右到左， 从下到上执行
    rules: [
      {
        // 找到所有的图片
        test:/\.(png|jpg|gif)$/,
        use: 'file-loader'
      },
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          // 用babel-loader，需要把ES6转换成ES5语法
          options: {
            // 这是一个大插件的集合
            presets: [
              // @babel/preset-env 就是用来将ES6转化成ES5语法的
              '@babel/preset-env'
            ],
            // 我们还需要配置一些小插件
            plugins: [
              // 将ES7语法中的类装饰器转换成ES5语法， legacy 是宽松模式
              ['@babel/plugin-proposal-decorators', {'legacy': true}],
              // 将ES7语法中的类转换成ES5语法
              ['@babel/plugin-proposal-class-properties', {'loose': true}],
              '@babel/plugin-transform-runtime'
            ]
          }
        },
        // 只查找src目录下的js
        include: path.resolve(__dirname, 'src'),
        // 不找node_modules里面的js
        // 排除
        exclude: /node_modules/
      },
      // 规则,需要css-loader， 可以处理css文件
      // css-loader 主要用来解析 @import这种语法的
      // 还需要style-loader，它是把css插入到head的标签中
      // loader的用法， 多个loader需要一个数组
      // loader是有顺序的，默认是从右向左执行
      // loader还可以写成 对象方式
      {
        test: /\.css$/,
        use: [
          // 把样式都抽离成一个单独的css文件，叫main.css
          MiniCssExtractPlugin.loader,
          // 给CSS3语法，比如transfrom加上前缀。
          // 需要新建 postcss.config.js 配置文件
          // 需要引用 autoprefixer 这个插件
          'css-loader',
          'postcss-loader'
        ]
      },
      // 还可以处理less文件
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'less-loader' // 把less转变为css
        ]
      },
      // 还可能处理 sass stylus,
      // sass 要安装的包 node-sass sass-loader
      // stylus 要安装的包 stylus stylus-loader
      {
        // 找到所有的scss文件
        test: /\.scss$/,
        // 用的loader统一是sass-loader,sass和scss用的都是sass-loader
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'sass-loader' // 把scss转变为css
        ]
      },
      {
        // 找到所有的.styl文件
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'stylus-loader' // 把stylus转变为css
        ]
      }
    ]
  }
}

因为图片是实体文件，所以运行打包：

npm run build

会在dist目录生成一个图片的文件。

然后运行开发环境，打开浏览器查看：

npm run dev

成功在页面上输出图片！ 

 

2、在CSS中引入图片

src/index.css:

@import './a.css';
body {
    background: #c00;
    transform: rotate(45deg);
    background: url("./logo.png");
}

 在index.js中引入：

import './index.css'

然后在webpack.config.js中进行配置：

// webpack是node写出来的 node的写法

// path是node的内置模块，所以不需要去安装
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 对单独抽离出来的css文件进行压缩。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 对生成的bundle.js文件进行压缩。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  // 对单独抽离出来的main.css进行压缩时，
  // 使用到了optimize-css-assets-webpack-plugin插件
  // 因此需要加一个优化项配置
  optimization: {
    minimizer: [
      // 对生成的bundle.js进行压缩
      new UglifyJsPlugin({
        cache: true,
        // 并发打包，一起压缩多个。
        parallel: true,
        sourceMap: true
      }),
      // 对抽离出来的main.css进行压缩
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  devServer: { // 开发服务器的配置
    port: 3000,
    progress: true, // 编译的进度条
    contentBase: './dist', // 以dist目录为默认启动目录
    compress: true, // 自动压缩
    open: true // 自动打开浏览器，适合懒人
  },
  // 模式：默认有两种，一种叫生产环境production， 一种叫 development
  // production 是经过压缩过的
  // 所以，我们选择 development模式，可以看清打包后的代码
  mode: 'production',
  entry: './src/index.js', // 入口文件，也就是打包这个js文件
  // 打包的文件位置
  output: {
    // 当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件
    // [hash:8]，只显示8位的hash值
    filename: 'bundle.[hash:8].js', // 打包出来当然文件名叫 bundle.js
    // resolve() 可以把相对路径解析成绝对路径
    // __dirname 是当前目录
    path: path.resolve(__dirname, 'dist') // 路径必须是一个绝对路径
  },
  // 数组 放着所有的webpack插件
  plugins: [
    // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
    new HtmlWebpackPlugin({
      template: './src/index.html', // 使用哪个html模板
      filename: 'index.html', // 打包后也叫做 index.html
      // 压缩这个html文件(主要是对HTML文件进行压缩)
      minify: {
        // 删除这个html文件的双引号
        removeAttributeQuotes: true,
        // 变成一行
        collapseWhitespace: true
      },
      // 加一个hash戳
      hash: true
    }),
    new MiniCssExtractPlugin({
      // 抽离出来的文件叫 main.css
      filename: 'main.css'
    })
  ],
  module: { // 模块
    // loader 默认是从右到左， 从下到上执行
    rules: [
      {
        // 找到所有的图片
        test:/\.(png|jpg|gif)$/,
        use: 'file-loader'
      },
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          // 用babel-loader，需要把ES6转换成ES5语法
          options: {
            // 这是一个大插件的集合
            presets: [
              // @babel/preset-env 就是用来将ES6转化成ES5语法的
              '@babel/preset-env'
            ],
            // 我们还需要配置一些小插件
            plugins: [
              // 将ES7语法中的类装饰器转换成ES5语法， legacy 是宽松模式
              ['@babel/plugin-proposal-decorators', {'legacy': true}],
              // 将ES7语法中的类转换成ES5语法
              ['@babel/plugin-proposal-class-properties', {'loose': true}],
              '@babel/plugin-transform-runtime'
            ]
          }
        },
        // 只查找src目录下的js
        include: path.resolve(__dirname, 'src'),
        // 不找node_modules里面的js
        // 排除
        exclude: /node_modules/
      },
      // 规则,需要css-loader， 可以处理css文件
      // css-loader 主要用来解析 @import这种语法的
      // 还需要style-loader，它是把css插入到head的标签中
      // loader的用法， 多个loader需要一个数组
      // loader是有顺序的，默认是从右向左执行
      // loader还可以写成 对象方式
      {
        test: /\.css$/,
        use: [
          // 把样式都抽离成一个单独的css文件，叫main.css
          MiniCssExtractPlugin.loader,
          // 给CSS3语法，比如transfrom加上前缀。
          // 需要新建 postcss.config.js 配置文件
          // 需要引用 autoprefixer 这个插件
          'css-loader',
          'postcss-loader'
        ]
      },
      // 还可以处理less文件
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'less-loader' // 把less转变为css
        ]
      },
      // 还可能处理 sass stylus,
      // sass 要安装的包 node-sass sass-loader
      // stylus 要安装的包 stylus stylus-loader
      {
        // 找到所有的scss文件
        test: /\.scss$/,
        // 用的loader统一是sass-loader,sass和scss用的都是sass-loader
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'sass-loader' // 把scss转变为css
        ]
      },
      {
        // 找到所有的.styl文件
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'stylus-loader' // 把stylus转变为css
        ]
      }
    ]
  }
}

运行：

npm run dev

3、在html文件中引入

 src/index.html:

<img src="./logo.png" alt="" />

这里需要一个插件：

npm install html-withimg-loader -D

 在webpack.config.js中进行配置：

// webpack是node写出来的 node的写法

// path是node的内置模块，所以不需要去安装
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 对单独抽离出来的css文件进行压缩。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 对生成的bundle.js文件进行压缩。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  // 对单独抽离出来的main.css进行压缩时，
  // 使用到了optimize-css-assets-webpack-plugin插件
  // 因此需要加一个优化项配置
  optimization: {
    minimizer: [
      // 对生成的bundle.js进行压缩
      new UglifyJsPlugin({
        cache: true,
        // 并发打包，一起压缩多个。
        parallel: true,
        sourceMap: true
      }),
      // 对抽离出来的main.css进行压缩
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  devServer: { // 开发服务器的配置
    port: 3000,
    progress: true, // 编译的进度条
    contentBase: './dist', // 以dist目录为默认启动目录
    compress: true, // 自动压缩
    open: true // 自动打开浏览器，适合懒人
  },
  // 模式：默认有两种，一种叫生产环境production， 一种叫 development
  // production 是经过压缩过的
  // 所以，我们选择 development模式，可以看清打包后的代码
  mode: 'production',
  entry: './src/index.js', // 入口文件，也就是打包这个js文件
  // 打包的文件位置
  output: {
    // 当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件
    // [hash:8]，只显示8位的hash值
    filename: 'bundle.[hash:8].js', // 打包出来当然文件名叫 bundle.js
    // resolve() 可以把相对路径解析成绝对路径
    // __dirname 是当前目录
    path: path.resolve(__dirname, 'dist') // 路径必须是一个绝对路径
  },
  // 数组 放着所有的webpack插件
  plugins: [
    // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
    new HtmlWebpackPlugin({
      template: './src/index.html', // 使用哪个html模板
      filename: 'index.html', // 打包后也叫做 index.html
      // 压缩这个html文件(主要是对HTML文件进行压缩)
      minify: {
        // 删除这个html文件的双引号
        removeAttributeQuotes: true,
        // 变成一行
        collapseWhitespace: true
      },
      // 加一个hash戳
      hash: true
    }),
    new MiniCssExtractPlugin({
      // 抽离出来的文件叫 main.css
      filename: 'main.css'
    })
  ],
  module: { // 模块
    // loader 默认是从右到左， 从下到上执行
    rules: [
      {
        // 找到html文件
        test: /\.html$/,
        use: 'html-withimg-loader'
      },
      {
        // 找到所有的图片
        test:/\.(png|jpg|gif)$/,
        use: 'file-loader'
      },
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          // 用babel-loader，需要把ES6转换成ES5语法
          options: {
            // 这是一个大插件的集合
            presets: [
              // @babel/preset-env 就是用来将ES6转化成ES5语法的
              '@babel/preset-env'
            ],
            // 我们还需要配置一些小插件
            plugins: [
              // 将ES7语法中的类装饰器转换成ES5语法， legacy 是宽松模式
              ['@babel/plugin-proposal-decorators', {'legacy': true}],
              // 将ES7语法中的类转换成ES5语法
              ['@babel/plugin-proposal-class-properties', {'loose': true}],
              '@babel/plugin-transform-runtime'
            ]
          }
        },
        // 只查找src目录下的js
        include: path.resolve(__dirname, 'src'),
        // 不找node_modules里面的js
        // 排除
        exclude: /node_modules/
      },
      // 规则,需要css-loader， 可以处理css文件
      // css-loader 主要用来解析 @import这种语法的
      // 还需要style-loader，它是把css插入到head的标签中
      // loader的用法， 多个loader需要一个数组
      // loader是有顺序的，默认是从右向左执行
      // loader还可以写成 对象方式
      {
        test: /\.css$/,
        use: [
          // 把样式都抽离成一个单独的css文件，叫main.css
          MiniCssExtractPlugin.loader,
          // 给CSS3语法，比如transfrom加上前缀。
          // 需要新建 postcss.config.js 配置文件
          // 需要引用 autoprefixer 这个插件
          'css-loader',
          'postcss-loader'
        ]
      },
      // 还可以处理less文件
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'less-loader' // 把less转变为css
        ]
      },
      // 还可能处理 sass stylus,
      // sass 要安装的包 node-sass sass-loader
      // stylus 要安装的包 stylus stylus-loader
      {
        // 找到所有的scss文件
        test: /\.scss$/,
        // 用的loader统一是sass-loader,sass和scss用的都是sass-loader
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'sass-loader' // 把scss转变为css
        ]
      },
      {
        // 找到所有的.styl文件
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'stylus-loader' // 把stylus转变为css
        ]
      }
    ]
  }
}

运行：

npm run dev

 

4、url-loader

file-loader和url-loader都可以用来处理图片。

安装：

npm install url-loader -D

在webpack.config.js中进行配置：

// webpack是node写出来的 node的写法

// path是node的内置模块，所以不需要去安装
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 对单独抽离出来的css文件进行压缩。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 对生成的bundle.js文件进行压缩。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  // 对单独抽离出来的main.css进行压缩时，
  // 使用到了optimize-css-assets-webpack-plugin插件
  // 因此需要加一个优化项配置
  optimization: {
    minimizer: [
      // 对生成的bundle.js进行压缩
      new UglifyJsPlugin({
        cache: true,
        // 并发打包，一起压缩多个。
        parallel: true,
        sourceMap: true
      }),
      // 对抽离出来的main.css进行压缩
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  devServer: { // 开发服务器的配置
    port: 3000,
    progress: true, // 编译的进度条
    contentBase: './dist', // 以dist目录为默认启动目录
    compress: true, // 自动压缩
    open: true // 自动打开浏览器，适合懒人
  },
  // 模式：默认有两种，一种叫生产环境production， 一种叫 development
  // production 是经过压缩过的
  // 所以，我们选择 development模式，可以看清打包后的代码
  mode: 'production',
  entry: './src/index.js', // 入口文件，也就是打包这个js文件
  // 打包的文件位置
  output: {
    // 当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件
    // [hash:8]，只显示8位的hash值
    filename: 'bundle.[hash:8].js', // 打包出来当然文件名叫 bundle.js
    // resolve() 可以把相对路径解析成绝对路径
    // __dirname 是当前目录
    path: path.resolve(__dirname, 'dist') // 路径必须是一个绝对路径
  },
  // 数组 放着所有的webpack插件
  plugins: [
    // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
    new HtmlWebpackPlugin({
      template: './src/index.html', // 使用哪个html模板
      filename: 'index.html', // 打包后也叫做 index.html
      // 压缩这个html文件(主要是对HTML文件进行压缩)
      minify: {
        // 删除这个html文件的双引号
        removeAttributeQuotes: true,
        // 变成一行
        collapseWhitespace: true
      },
      // 加一个hash戳
      hash: true
    }),
    new MiniCssExtractPlugin({
      // 抽离出来的文件叫 main.css
      filename: 'main.css'
    })
  ],
  module: { // 模块
    // loader 默认是从右到左， 从下到上执行
    rules: [
      {
        // 找到html文件
        test: /\.html$/,
        use: 'html-withimg-loader'
      },
      {
        // 找到所有的图片
        test:/\.(png|jpg|gif)$/,
        // 做一个限制，当我们的图片，小于多少k的时候，用base64来转化
        // 否则用file-loader产生真实的图片
        use: {
          loader: 'url-loader',
          options: {
            limit: 200*1024   // 小于200k，会转化成base64
          }
        }
      },
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          // 用babel-loader，需要把ES6转换成ES5语法
          options: {
            // 这是一个大插件的集合
            presets: [
              // @babel/preset-env 就是用来将ES6转化成ES5语法的
              '@babel/preset-env'
            ],
            // 我们还需要配置一些小插件
            plugins: [
              // 将ES7语法中的类装饰器转换成ES5语法， legacy 是宽松模式
              ['@babel/plugin-proposal-decorators', {'legacy': true}],
              // 将ES7语法中的类转换成ES5语法
              ['@babel/plugin-proposal-class-properties', {'loose': true}],
              '@babel/plugin-transform-runtime'
            ]
          }
        },
        // 只查找src目录下的js
        include: path.resolve(__dirname, 'src'),
        // 不找node_modules里面的js
        // 排除
        exclude: /node_modules/
      },
      // 规则,需要css-loader， 可以处理css文件
      // css-loader 主要用来解析 @import这种语法的
      // 还需要style-loader，它是把css插入到head的标签中
      // loader的用法， 多个loader需要一个数组
      // loader是有顺序的，默认是从右向左执行
      // loader还可以写成 对象方式
      {
        test: /\.css$/,
        use: [
          // 把样式都抽离成一个单独的css文件，叫main.css
          MiniCssExtractPlugin.loader,
          // 给CSS3语法，比如transfrom加上前缀。
          // 需要新建 postcss.config.js 配置文件
          // 需要引用 autoprefixer 这个插件
          'css-loader',
          'postcss-loader'
        ]
      },
      // 还可以处理less文件
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'less-loader' // 把less转变为css
        ]
      },
      // 还可能处理 sass stylus,
      // sass 要安装的包 node-sass sass-loader
      // stylus 要安装的包 stylus stylus-loader
      {
        // 找到所有的scss文件
        test: /\.scss$/,
        // 用的loader统一是sass-loader,sass和scss用的都是sass-loader
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'sass-loader' // 把scss转变为css
        ]
      },
      {
        // 找到所有的.styl文件
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'stylus-loader' // 把stylus转变为css
        ]
      }
    ]
  }
}

 进行打包：

npm run build

十、打包文件分类

我们还需要给我们的静态资源，进行分类。

css抽离出来放到一个目录下，图片放到另一个目录下。

而且，给打包出来的css和js以及图片路径前，都加上 "http://xxx.com"。

 在webpack.config.js中进行配置：

// webpack是node写出来的 node的写法

// path是node的内置模块，所以不需要去安装
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 对单独抽离出来的css文件进行压缩。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 对生成的bundle.js文件进行压缩。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  // 对单独抽离出来的main.css进行压缩时，
  // 使用到了optimize-css-assets-webpack-plugin插件
  // 因此需要加一个优化项配置
  optimization: {
    minimizer: [
      // 对生成的bundle.js进行压缩
      new UglifyJsPlugin({
        cache: true,
        // 并发打包，一起压缩多个。
        parallel: true,
        sourceMap: true
      }),
      // 对抽离出来的main.css进行压缩
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  devServer: { // 开发服务器的配置
    port: 3000,
    progress: true, // 编译的进度条
    contentBase: './dist', // 以dist目录为默认启动目录
    compress: true, // 自动压缩
    open: true // 自动打开浏览器，适合懒人
  },
  // 模式：默认有两种，一种叫生产环境production， 一种叫 development
  // production 是经过压缩过的
  // 所以，我们选择 development模式，可以看清打包后的代码
  mode: 'production',
  entry: './src/index.js', // 入口文件，也就是打包这个js文件
  // 打包的文件位置
  output: {
    // 当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件
    // [hash:8]，只显示8位的hash值
    filename: 'bundle.[hash:8].js', // 打包出来当然文件名叫 bundle.js
    // resolve() 可以把相对路径解析成绝对路径
    // __dirname 是当前目录
    path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
    // 那么html中的css和图片，都会加上这个前缀路径
    publicPath: 'http://xxx.com'  // 给打包出来的路径都加上这个前缀
  },
  // 数组 放着所有的webpack插件
  plugins: [
    // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
    new HtmlWebpackPlugin({
      template: './src/index.html', // 使用哪个html模板
      filename: 'index.html', // 打包后也叫做 index.html
      // 压缩这个html文件(主要是对HTML文件进行压缩)
      minify: {
        // 删除这个html文件的双引号
        removeAttributeQuotes: true,
        // 变成一行
        collapseWhitespace: true
      },
      // 加一个hash戳
      hash: true
    }),
    new MiniCssExtractPlugin({
      // 抽离出来的文件叫 main.css
      // filename: 'main.css'
      // 抽离出来的main.css 放到css目录下
      filename: 'css/main.css'
    })
  ],
  module: { // 模块
    // loader 默认是从右到左， 从下到上执行
    rules: [
      {
        // 找到html文件
        test: /\.html$/,
        use: 'html-withimg-loader'
      },
      {
        // 找到所有的图片
        test:/\.(png|jpg|gif)$/,
        // 做一个限制，当我们的图片，小于多少k的时候，用base64来转化
        // 否则用file-loader产生真实的图片
        use: {
          loader: 'url-loader',
          options: {
            // limit: 200*1024,   // 200k
              limit: 1,          // 一般都会大于1字节。会生成一个真实的图片
              outputPath: '/img/'
          }
        }
      },
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          // 用babel-loader，需要把ES6转换成ES5语法
          options: {
            // 这是一个大插件的集合
            presets: [
              // @babel/preset-env 就是用来将ES6转化成ES5语法的
              '@babel/preset-env'
            ],
            // 我们还需要配置一些小插件
            plugins: [
              // 将ES7语法中的类装饰器转换成ES5语法， legacy 是宽松模式
              ['@babel/plugin-proposal-decorators', {'legacy': true}],
              // 将ES7语法中的类转换成ES5语法
              ['@babel/plugin-proposal-class-properties', {'loose': true}],
              '@babel/plugin-transform-runtime'
            ]
          }
        },
        // 只查找src目录下的js
        include: path.resolve(__dirname, 'src'),
        // 不找node_modules里面的js
        // 排除
        exclude: /node_modules/
      },
      // 规则,需要css-loader， 可以处理css文件
      // css-loader 主要用来解析 @import这种语法的
      // 还需要style-loader，它是把css插入到head的标签中
      // loader的用法， 多个loader需要一个数组
      // loader是有顺序的，默认是从右向左执行
      // loader还可以写成 对象方式
      {
        test: /\.css$/,
        use: [
          // 把样式都抽离成一个单独的css文件，叫main.css
          MiniCssExtractPlugin.loader,
          // 给CSS3语法，比如transfrom加上前缀。
          // 需要新建 postcss.config.js 配置文件
          // 需要引用 autoprefixer 这个插件
          'css-loader',
          'postcss-loader'
        ]
      },
      // 还可以处理less文件
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'less-loader' // 把less转变为css
        ]
      },
      // 还可能处理 sass stylus,
      // sass 要安装的包 node-sass sass-loader
      // stylus 要安装的包 stylus stylus-loader
      {
        // 找到所有的scss文件
        test: /\.scss$/,
        // 用的loader统一是sass-loader,sass和scss用的都是sass-loader
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'sass-loader' // 把scss转变为css
        ]
      },
      {
        // 找到所有的.styl文件
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'stylus-loader' // 把stylus转变为css
        ]
      }
    ]
  }
}

打包：

npm run build

打包结果：

 

2、如果只想给图片进行路径的处理

那么单独在处理图片的里面加上 publicPath。

webpack.config.js:

{
        // 找到所有的图片
        test:/\.(png|jpg|gif)$/,
        // 做一个限制，当我们的图片，小于多少k的时候，用base64来转化
        // 否则用file-loader产生真实的图片
        use: {
          loader: 'url-loader',
          options: {
            // limit: 200*1024,   // 200k
              limit: 1,          // 一般都会大于1字节。会生成一个真实的图片
              outputPath: '/img/',
              publicPath: 'http://123.com'   // 单独给图片的路径加上前缀路径
          }
        }
      },

而这里就可以不用加了：

在output对象里面加，是给所有打包出来的css和图片以及js，路径都加上前缀路径 "http://xxx.com" 。 

运行：

npm run build

结果是只给图片加上了前缀路径，而css和js路径，都没有加前缀路径。