webpack的基本使用

安装

npm install webpack webpack-cli -D

配置

在根目录中创建 webpack.config.js 文件，并设置为一下内容

const path = require('path')

module.exports = {
  // 打包模式 development 或 production
  mode: 'development',
  // 打包入口的文件路径
  entry: path.join(__dirname, './src/index.js'),
  // 输出路径和文件名
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'js/main.js'
  }
}

在 package.js 的 script 节点下，新增以下内容

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },

在终端中运行 npm run dev 命令，启动 webpa 进行项目的打包构建

扩展

webpack-dev-server

每当修改源代码，webpack会自动构建和打包

npm install webpack-dev-server -D

修改 webpack.config.js 文件

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack serve --mode development",
    "build": "webpack --mode production"
  },

想要获得效果，需修改引用的 js 文件位置

<script src="http://localhost:8080/bundle.js"></script>

html-webpack-plugin

将项目中的 html 文件复制到内存中，并自动注入打包的 js 文件

npm i --save-dev html-webpack-plugin

在 webpack.config.js 文件中添加一下内容

const HtmlPlugin = require('html-webpack-plugin')

const htmlPlugin = new HtmlPlugin({
  template: './src/index.html',
  filename: './index.html'
})

module.exports = {
  plugins: [
    htmlPlugin
  ],
}

打开 http://localhost:8080/ 即可看到效果

解决默认 Source Map 的问题

在 webpack.config.js 文件添加一下内容

/*
  开发环境
*/
const webpackConfig = {
  // 在开发调试阶段，建议大家把 devtool 的值设置为 eval-source-map
  devtool: 'eval-source-map',
  ...
};

/*
  发布环境
*/
const webpackConfig = {
  // 在开发调试阶段，建议大家把 devtool 的值设置为 eval-source-map
  devtool: 'nosources-source-map',
  ...
};

devServer

在 webpack.config.js 文件添加一下内容

module.exports = {
  ...
  devServer: {
    // 自动打开页面
    open: true,
    // 指定运行的主机IP
    host: '127.0.0.1',
    // 配置端口号
    port: 80,
  }
}

处理CSS文件

安装 style-loader 和 css-loader 插件，在入口 js 文件中导入 css 文件

npm i style-loader css-loader -D

配置

在 js 入口文件引入要使用的 css 文件

import './css/index.css'

在 webpack.config.js 文件添加一下内容

module.exports = {
  ...
  module: {
    rules: [
      // 定义不同的模块对应的 loader
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }
    ]
  }
}

处理less文件

安装 less-loader，在入口 js 文件中导入 less 文件

npm install less less-loader --save-dev

在 webpack.config.js 文件添加一下内容

module.exports = {
  ...
  module: {
    rules: [
      // 定义不同的模块对应的 loader
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
     // 处理 less 文件
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
    ]
  }
}

处理图片

安装 url-loader，在入口 js 文件中导入图片文件

npm i url-loader file-loader -D

在 webpack.config.js 文件添加一下内容

module.exports = {
  ...
  module: {
    rules: [
      // 定义不同的模块对应的 loader
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
     // 处理 less 文件
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
      // 处理图片
      { test: /\.jpg|png|gif$/, use: 'url-loader?limit=2229&outputPath=images' },
    ]
  }
}

处理 JS 高级语法

安装 babel-loader

npm i babel-loader @babel/core @babel/plugin-proposal-decorators -D

在 webpack.config.js 文件添加一下内容

module.exports = {
  ...
  module: {
    rules: [
      // 定义不同的模块对应的 loader
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
     // 处理 less 文件
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
      // 处理图片
      { test: /\.jpg|png|gif$/, use: 'url-loader?limit=22229' },
      // 处理高级 js 语法
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
    ]
  }
}

在根目录创建 babel.config.js 文件，对 babel-loader 进行配置

module.exports = {
  // 声明 babel 可用的插件，在 webpack 调用 babel-loader 时，先加载 plugins 来使用
  plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
}

自定删除 dist 目录

在 webpack.config.js 文件添加一下内容

module.exports = {
  ...
  output: {
    ...
    clean: true,
  },
  ...
}

或使用 clean-webpack-plugin 插件删除

安装 clean-webpack-plugin

npm install --save-dev clean-webpack-plugin

在 webpack.config.js 文件添加一下内容

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

const webpackConfig = {
    ...
    plugins: [
       ...
       new CleanWebpackPlugin(),
    ],
};

打包发布

运行 npm run build 命令