webpack入门

webpack入门

初始化项目

初始化npm

npm init

webpack在node环境下运行，需要下载webpack和webpack-cli

npm i -D webpack webpack-cli

-D: --save-dev
-S: --save

新建文件夹src，在该目录下生成main.js文件，可以写些测试代码

console.log('hello world')

配置package.json

"scripts": {
  "build": "webpack src/main.js"
},

执行

npm run build

生成dist文件夹，里面含有main.js文件就表明打包成功了。以上，都是webpack的默认配置，现在来看自定义配置

自定义配置

新建build文件夹，在该文件夹中生成文件名为webpack.config.js的文件

const path = require('path')
module.exports = {
  mode: "development", // 打包模式
  entry: path.resolve(__dirname, '../src/main.js'),
  output: {
    filename: 'output.js', // 打包后输出的文件名
    path: path.resolve(__dirname, '../dist') // 打包后的输出目录
  }
}

上面输出的文件名都是output.js，要对其进行更改

const path = require('path')
module.exports = {
  mode: "development", // 打包模式
  entry: path.resolve(__dirname, '../src/main.js'),
  output: {
    filename: '[name].[hash:8].js', // 打包后输出的文件名
    path: path.resolve(__dirname, '../dist') // 打包后输出的文件目录
  }
}

配置html模板

webpack打包完成后，需要每次去html文件那手动去更改js文件名显得很麻烦，这边使用插件来帮我们完成这件事

  npm i -D html-webpack-plugin

在根目录下面新建一个public文件夹，在该文件夹中生成index.html文件

webpack.config.js具体配置如下：

  const path = require('path')
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  module.exports = {
    mode: "development", // 打包模式
    entry: path.resolve(__dirname, '../src/main.js'),
    output: {
      filename: '[name].[hash:8].js', // 打包后输出的文件名
      path: path.resolve(__dirname, '../dist') // 打包后输出的文件目录
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: path.resolve(__dirname, '../public/index.html')
      })
    ]
  }

运行代码，可以发现js已自动注入到html文件中，如图所示：

• 多入口文件开发

  使用多个html-webpack-plugin实例来解决这个问题

  const path = require('path')
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  module.exports = {
    mode: "development", // 打包模式
    entry: {
      main: path.resolve(__dirname, '../src/main.js'),
      test: path.resolve(__dirname, '../src/test.js')
    },
    output: {
      filename: '[name].[hash:8].js', // 打包后输出的文件名
      path: path.resolve(__dirname, '../dist') // 打包后输出的文件目录
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: path.resolve(__dirname, '../public/index.html'),
        filename: 'index.html',
        chunks: ['main'] // 与入口文件对应的模块名
      }),
      new HtmlWebpackPlugin({
        template: path.resolve(__dirname, '../public/test.html'),
        filename: 'test.html',
        chunks: ['test'] // 与入口文件对应的模块名
      })
    ]
  }

运行代码，此时生成的dist目录是这样的，如下图所示：

在打包前，清空dist文件夹

每次执行完代码，发现都会残留上一次生成的文件，可以通过clean-webpack-plugin清空文件

  const { CleanWebpackPlugin } = require('clean-webpack-plugin')
  module.exports = {
    // ...省略其它配置
    plugins: [
      new CleanWebpackPlugin()
    ]
  }

注： clean-webpack-plugin是通过解构进行引用的，一不小心就会报下面这个错误，如图所示：

引入css文件

入口文件为js，因此在入口文件引入css文件，如下图所示：

同时，需要一些loader来解析css文件

  npm i -D style-loader css-loader

如若还有less等来构建样式，还需多下载两个loader

  npm i -D less less-loader

在index.css写的样式为：

  div {
    color: red;
  }

在test.less写的样式为：

  div {
    font-size: 50px;
  }

webpack.config.js的配置如下

module.exports = {
  // ...省略其它配置
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] // 从右向左解析
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader'] // 从右向左解析
      }
    ]
  }
}

给css样式加入前缀

  npm i -D postcss-loader autoprefixer

• 方式一
  在项目根目录创建postcss.config.js文件，配置如下：

  module.exports = {
    plugins: [
      require('autoprefixer')
    ]
  }

• 方式二
  直接在webpack.config.js里进行配置

module.exports = {
  // ...省略其它配置
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', {
          loader: 'postcss-loader',
          options: {
            plugins: [require('autoprefixer')]
          }
        }, 'less-loader'] // 从右向左解析
      }
    ]
  }
}

拆分css

（1） mini-css-extract-plugin
把css样式从js文件中提取出来，webpack4.0以前，使用extract-text-webpack-plugin,4.0以后推荐使用mini-css-extract-plugin

配置如下：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  // ...省略其它配置
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'] // 从右向左解析
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', 
          {
            loader: 'postcss-loader',
            options: {
              plugins: [require('autoprefixer')]
            }
          }, 
          'less-loader'
        ] // 从右向左解析
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].[hash:8].css",
      chunkFilename: "[id].css"
    })
  ]
}

css样式合并为一个，如图所示：

（2）extract-text-webpack-plugin@next
mini-css-extract-plugin是将所有的css文件合并到一个css文件当中，目前该插件还不支持一一对应的多个css文件，因此需要安装extract-text-webpack-plugin@next

  npm i -D extract-text-webpack-plugin@next

配置如下：

const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
const indexCss = new ExtractTextWebpackPlugin('index.css')
const testLess = new ExtractTextWebpackPlugin('test.less')
module.exports = {
  // ...省略其它配置
  module: {
    rules: [
      {
        test: /\.css$/,
        use: indexCss.extract({
          use: ['css-loader']
        }) // 从右向左解析
      },
      {
        test: /\.less$/,
        use: testLess.extract({
          use: [
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                plugins: [require('autoprefixer')]
              }
            }, 
            'less-loader'
          ]
        })// 从右向左解析
      }
    ]
  },
  plugins: [
    indexCss,
    testLess
  ]
}

使用babel转义js文件

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

配置如下：

module.exports = {
  // ...省略其它配置
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        },
        exclude: /node_modules/
      }
    ]
  }
}

babel-loader只能将es6、es7、es8的语法转成es5，但是对于新的api并没有转化功能，因为要引入该插件

  npm i @babel/polyfill

配置如下：

module.exports = {
  // ...省略其它配置
  entry: {
    main: ['@babel/polyfill',path.resolve(__dirname, '../src/main.js')],
    test: ['@babel/polyfill', path.resolve(__dirname, '../src/test.js')]
  }
}

Everyday is a clean slate!