此博客使用的版本号 webpack^4.32.2 webpack-cli^3.3.2

vue官方提供了一个基于webpack的集成化的构建工具 vue-cli，可以快速生成一个vue项目模板，不过在你需要根据实际需要做一些配置上的更改时，其操作比较麻烦。所以学习和使用webpack来构建项目是很有必要的，至少要做到看得懂，会改配置。附上webpack官网

初始化及安装

附上官方初始化指南
初始化npm环境

npm init -y
复制代码

安装webpack

npm install --save-dev webpack webpack-cli
复制代码

在根目录新建webpack.config.js文件

//引入 nodejs 的包
const path = require('path') 
module.exports = {
    //通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化
    mode: 'development',
    // entry 是入口文件
    entry: path.join(__dirname, 'src', 'index.js'),
    // output 是出口文件，filename 是出口文件名字，path 是出口文件的目录地址
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    }
}
复制代码

在根目录下新建 index.js, 也就是 webpack.config.js 中的入口文件，输入

console.log('this is webpack')
复制代码

修改 package.json，往 scripts 里添加 build 命令行

    "build": "webpack --config webpack.config.js"
复制代码

运行 npm run build ，可以看到生成了一个 dist 目录，里面有 bundle.js 文件，切换到 dist 目录下，运行 node bundle.js，则输出 ‘this is webpack’

到此则表示 webpack 能够正常使用，接下来做进一步的配置

dev和build

使用 webpack 时需要将开发和打包分离开，以下是目录结构

webpack.common.js 用来存放生产环境和开发环境的公共代码，webpack.dev.js 用来存放开发环境的配置，webpack.prod.js 用来存放生产环境的配置，所以需要用到 webpack-merge 来融合公共配置和不同环境下的配置官方文档

npm i webpack-merge --save-dev
复制代码

对其做进一步优化，在根目录下新建 src 文件夹，将 index.js 移入

// webpack.common.js 公共配置
const path = require('path')
const srcPath = path.join(__dirname, '..', 'src')
module.exports = {
  entry: path.join(srcPath,'index.js')
}
复制代码

production

// 生产环境 webpack.prod.js
const path = require('path')
const webpackCommonConf = require('./webpack.common.js')
const { smart } = require('webpack-merge')
const distPath = path.join(__dirname, '..','dist') 
module.exports = smart(webpackCommonConf,{
  mode: 'production',
  output: {
    filename: 'bundle.[contentHash:8].js', // 打包时加上8位 hash 戳
    path: distPath
  }
})
复制代码

接下来 package.json 的 scripts 也要修改

"scripts": {
    "build": "webpack --config build/webpack.prod.js"
  },
复制代码

运行 npm run build ，可以看到 dist 目录下生成了 js 文件

不过我们发现，dist 目录下有两个js文件，这是由于刚开始测试打包时我们没有用到hash来为文件命名，后来又用到了，这就导致两个文件的文件名不一样，所以会生成两个文件，导致我们的 /dist 文件夹相当杂乱。webpack 会生成文件，然后将这些文件放置在 /dist 文件夹中，但是 webpack 无法追踪到哪些文件是实际在项目中用到的。通常，在每次构建前清理 /dist 文件夹，是比较推荐的做法，因此只会生成用到的文件。让我们完成这个需求。官方文档安装

npm install clean-webpack-plugin --save-dev
复制代码

修改 webpack.prod.js

// 生产环境 webpack.prod.js
const path = require('path')
const webpackCommonConf = require('./webpack.common.js')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const { smart } = require('webpack-merge')
const distPath = path.join(__dirname, '..', 'dist')
module.exports = smart(webpackCommonConf, {
  mode: 'production',
  output: {
    filename: 'bundle.[contentHash:8].js', // 打包时加上8位 hash 戳
    path: distPath
  },
  plugins: [
    new CleanWebpackPlugin()
  ]
})

复制代码

再次打包时 dist 里的js文件就只有一个了

development

首先在 src 目录下新建一个 index.html 作为本地服务启动的载体，并初始化安装插件

npm install --save-dev html-webpack-plugin
复制代码

在webpack.common.js里配置

// webpack.common.js 公共配置
const path = require('path')
const srcPath = path.join(__dirname, '..', 'src')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: path.join(srcPath, 'index.js'),
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(srcPath, 'index.html'),
      filename: 'index.html'
    })
  ]
}
复制代码

此时打包就会在dist目录下生成一个index.html 文件安装 webpack-dev-server 官方文档

npm install --save-dev webpack-dev-server
复制代码

使用

// webpack.dev.js
const { smart } = require('webpack-merge')
const path = require('path')
const webpackCommonConf = require('./webpack.common.js')
const distPath = path.join(__dirname, '..','dist')
module.exports = smart(webpackCommonConf, {
  mode: 'development',
  devServer: {
    port: 3000,
    progress: true, // 显示打包的进度条
    contentBase: distPath, // 目录
    open: true, // 自动打开浏览器
    compress: true, // 启动 gzip 压缩
    hot: true // 启动热模块替换
  }
})
复制代码

修改package.json

"dev": "webpack-dev-server --config build/webpack.dev.js"
复制代码

运行npm run dev 即可

ES6

浏览器无法解析es6语法，所以要通过babel将es6转换为es5，babel官网

安装 babel系列

npm install --save-dev babel-loader @babel/core @babel/preset-env
复制代码

es6的转换在开发和生产都要使用，所以修改 webpack.common.js 配置，添加

module: {
    rules:[
      {test: /\.js$/, exclude: /node_modules$/, loader: 'babel-loader'}
    ]
  }
复制代码

在根目录下新建 .babelrc 文件，其内容为

{
  "presets": ["@babel/preset-env"]
}
复制代码

接下来做一下测试，将src下index.js里用上es6 的语法，看看能不能正常运行

const fn = ()=>{
  alert('babel test')
}
fn()
复制代码

运行npm run dev，

表示babel正常运行

source map

source map用来定位打包时遇到的错误，打包编译时通常是将多个文件打包为一个文件，如果没有source map，错误只会定位到你打包之后的那个单文件官方文档在webpack.prod.js里加上

devtool: 'source-map'
复制代码

运行npm run build可以看到，dist下生成了.map文件

使用css和stylus

webpack把文件都模块化，所以css文件需要loader处理，安装

npm install --save-dev css-loader style-loader
复制代码

配置，loader的执行顺序是从后往前的

{
        test: /\.css$/,
        exclude: /node_modules$/,
        loader: ['style-loader','css-loader']
      }
复制代码

新建一个css文件，在js中引入，运行npm run dev就可以看到效果安装sass

npm install sass-loader node-sass webpack --save-dev
复制代码

使用

{
        test: /\.scss$/,
        exclude: /node_modules$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
复制代码

抽离css

npm install --save-dev mini-css-extract-plugin
复制代码

在webpack.prod.js中使用

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-------------------------------------------------------------------
plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    })
  ],
module:{
    rules:[
      {
        test: /\.scss$/,
        exclude: /node_modules$/,
        use: [{
          loader: MiniCssExtractPlugin.loader,
          options: {
            publicPath: '../',
            hmr: process.env.NODE_ENV === 'development',
          },
        }, 'css-loader', 'sass-loader']
      }
    ]
  },
复制代码

设置别名和文件扩展名

官方文档在webpack.common.js中

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': path.join(__dirname, '..', 'src')
    }
  },
复制代码

加载图片字体

官方文档

Vue

安装loader

npm install -D vue-loader vue-template-compiler
复制代码