安装以及基本使用

建议结合webpack的英文版一起看，英文版的才是最新的，中文版方便理解

cnpm i webpack-cli -g

基本使用

//  webpack --mode development/production(默认) 入口文件 -o 输出文件

webpack --mode development index.js -o new_index.js

默认入口是 ./src文件夹下的index.js文件，输出默认的是./dist/main.js

webpack --mode development

webpack.config.js 配置文件

const path = require(‘path‘);

module.exports = {
  entry: {
    home_11:‘./src/index.js‘,
    detail_22:‘./src/detail.js‘,
    person_33:‘./src/person.js‘,
  },
  output: {
    path: path.resolve(__dirname, ‘dist‘),
    filename: ‘[name].new.js‘ 
  },
  mode:‘development‘ //这样就无须写在命令行里了
};

// 直接在命令行输入
webpack

常见loaders，预处理

url-loader

• 如果文件小于限制，将文件转为base64。如精灵图，但计算位置麻烦，可尝试将图片转为base64 存在 css文件 或 js文件,测试如下|：

//第一步.在当前的根目录下，生成package.json，方便记录都安装了啥
npm init -y 
// 第二步. 安装 url-loader
npm install --save-dev url-loader
// 第三步.终端执行‘webpack’,报错，说缺少 file-loader ，继续安装
cnpm install --save-dev file-loader
// 最后执行 webpack

babel-loader

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

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: ‘babel-loader‘,
        options: {
          presets: [‘@babel/preset-env‘],
          plugins: [‘@babel/plugin-proposal-object-rest-spread‘] //视具体情况最加对应的插件
        }
      }
    }
  ]
}

less-loader

• 安装

npm install less less-loader style-loader css-loader --save-dev

  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
            {
                loader: "style-loader" 
            }, {
                loader: "css-loader" 
            }, {
                loader: "less-loader" 
            }
          ]
      }
    ]
  }

• 有时候的报错，是这些的loader或者less版本太高了，降低即可

MiniCssExtractPlugin

将css相关 的单独抽为一个css文件

npm install --save-dev mini-css-extract-plugin

  const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘);
  
  module.exports ={
      ...
       plugins: [
        new MiniCssExtractPlugin({
          // Options similar to the same options in webpackOptions.output
          // both options are optional
          filename: ‘[name].css‘,
          chunkFilename: ‘[id].css‘,
        }),
    
      ],
      module: {
        rules: [
          {
            test: /\.less$/,
            use: [
              {
                loader: MiniCssExtractPlugin.loader,
              },
              ‘css-loader‘,
              ‘less-loader‘]
          }
        ]
      },
  }

• 在此过程中，遇到如下报错，但安装npm i -D webpack-cli后解决

DefinePlugin 定义全局变量

  const webpack=require(‘webpack‘);
  
  module.exports ={
      ...
      plugins: [
        new webpack.DefinePlugin({
          THEME_COLOR:"#000000",
          RQUEST_URL:"https://...."
        })
      ],
      module: {
        ....
      }
  }

HtmlWebpackPlugin 生成html文件

具体看webpack官网的HtmlWebpackPlugin的 github地址

npm install --save-dev html-webpack-plugin

  var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
  module.exports ={
        ...
        plugins: [
          new HtmlWebpackPlugin({
            title: ‘测试——‘,
            filename: ‘real.html‘,
            template:‘./src/detail.html‘
          })
        ],
        module: {
          ....
        }
  }

热替换，实时刷新页面

第一步

cnpm i webpack-dev-server -D

第二步，修改webpack.config.js

  module.exports ={
      ...
      devServer: {
        contentBase: path.join(__dirname, ‘dist‘),//这里的dist得跟输出的目录一致
        compress: true,
        port: 9000
      },
  }

第三步，修改package.json文件的scripts字段。(因为如果直接在命令行输入webpack-dev-server，会找不到。如果从package.json 启动，就是找当前目录的node_modules里面找)

"scripts": {
  "start": "webpack-dev-server"
},

第四步，在终端输入

npm run start

webpack4.0的基本使用