目的：从零开始配置webpack，使用pug、typescript、scss。

原因：webpack虽然接触的多，但没有从零开始配置过项目。一般都是通过各种CLI工具生成项目(VueCli)，webpack已经由cli工具配置好了，在实际的开发中，遇到的相关问题都只要针对性的去查找资料基本都能解决，所以对webpack的了解一直都比较片面和琐碎，缺乏一个整体性的了解，更无法谈“理解”了。

以前都是跳着走的，现在趁着不是很忙，回到起点重新走一下吧。

1、初始化项目

首先创建一个项目文件夹，如webpack-demo

在根目录下执行：

npm init -y

初步设置项目的目录结构和功能划分

// 创建以下文件夹和文件
public/
    index.html       	// 模板文件
src/                    // 工作区
    assets/             // 图片、外部样式等资源
    module/             // 页面模块
    main.js            	// 入口文件
webpack.config.js   	// webpack配置文件

2、初步配置`webpack`

安装相应的依赖

npm install --save-dev webpack webpack-cli webpack-dev-server

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

webpack-cli：在webpack3中，webpack和它的CLI在同一个包中，但在webpack4中已经将两者分开，以更好的管理他们。

html-webpack-plugin: webpack中文网、github

简单的说就是把你打包的js插入的你的html中。

clean-webpack-plugin：github，一个webpack插件，用于在构建之前删除您的构建文件夹

配置`webpack.config.js`

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
    mode: 'production',
    // 入口
    entry: {
        app: './src/main.js'
    },
    // 出口
    output: {
        path: path.resolve(__dirname, './dist/'),
        filename: './js/[name].[hash:8].js'
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './public/index.html'
        })
    ]
}

配置`package.json`

{
    "script": {
        "build": "webpack"
    }
}

运行

npm run build

打包成功:)

3、配置`pug`相关(举一反三：使用`vue`)

安装相应的依赖

npm install --save-dev pug pug-loader

pug：一种html渲染模板中文文档

将`/public/index.html`改为`pug`格式的文件

doctype html
htm(lang="en")
head
    meta(charset="UTF-8")
    title= 'webpack-demo'
body
    div#app

配置`webpack.config.js`

module.exports = {
    module: {
        rules: [
            // 增加处理pug文件的loader
            {
                test: /\.pug$/,
                loader: 'pug-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.pug' // 修改文件后缀
        })
    ]
}

4、配置`ES6`支持（`babel`）

安装相应的依赖

主要是使用babel官方文档，中文文档-印记中文

npm install --save-dev babel-loader @babel/core @babel/preset-env

配置`webpack.config.js`

增加对js文件的处理。

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

创建`.babelrc`配置文件相关参考

{
    "presets": ["@babel/preset-env"]
}

5、配置`typescript`支持

安装相应的依赖

npm install --save-dev typescript ts-loader

将`main.js`改为`main.ts`

// 增加一个typescript测试代码
function test(str: string) {
    console.log(`console log ${str}`)
}
test('test')

配置`webpack.config.js`

module.exports = {
    entry: {
        app: './src/main.ts' // 修改文件后缀
    },
    module: {
       rules: [
            // 配置处理typescript文件的loader
           {
               test: /\.ts$/,
               loader: 'ts-loader'
           }
       ]
    }
}

配置`tsconfig.json`

在根目录下创建tsconfig.json。相关参考

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "sourceMap": true,
        "importHelpers": true
    },
    "exclude": [
        "node_modules"
    ]
}

6、配置`SCSS`支持

安装相应的依赖

npm install --save-dev css-loader mini-css-extract-plugin node-sass sass-loader

css-loader：解析 CSS 文件后，使用import 加载，并且返回 CSS 代码
sass-loader：加载和转译 SASS/SCSS 文件
mini-css-extract-plugin：轻量级CSS提取插件github

创建`/src/style.scss`文件

$--default-bg-color: #808080;

#app {
    width: 100%;
    height: 100px;
    background-color: $--default-bg-color;
}

在`/src/main.ts`中引入样式

import './style.scss'

配置`webpack.config.js`

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    module: {
       	rules: [
          	{
              	test: /\.scss/,
              	use: [
                  	MiniCssExtractPlugin.loader,
                  	'css-loader',
                  	'sass-loader'
              	]
          	}
      	]
    },
    plugins: [
        // 提取CSS文件
        new MiniCssExtractPlugin({
            filename: './css/[name].css',
            chunkFilename: '[id].css',
            ignoreOrder: false
        })
    ]
}

7、配置`PostCss`支持

postcss是一种对css进行编译的工具，类似于Babel对javascript的处理，常用的功能有：

使用下一代css语法
自动补全浏览器前缀
css代码压缩
...

postcss通过插件实现这些功能，

安装相应的依赖

npm i --save-dev postcss-loader autoprefixer

autoprefixer：postcss插件，使用Can I Use中的值向css中添加浏览器前缀。

创建`postcss.config.js`文件

module.exports = {
  plugins: {
    'autoprefixer': {}
  }
}

配置`webpack.config.js`

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  }
}

8、配置`browserslist`

github仓库地址

关于browserslist，官方的解释是The config to share target browsers and Node.js versions between different front-end tools.

在本示例中是配合autoprefixer、babel、postcss使用的。

创建`.browserslistrc`文件

last 1 version
> 1%
maintained node versions
not dead

9、配置对图片资源的处理

安装相应的依赖

npm install --save-dev file-loader url-loader html-loader

配置`webpack.config.js`

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|gif|webp)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 1024 * 30,
              outputPath: 'image',
              fallback: 'file-loader'
            }
          }
        ]
      }
    ]
  }
}

测试一下

在src/style.scss中添加图片引入，例如

.app {
	background-image: url("./assets/bg-banner.jpg");
}

创建src/index.pug文件，并引入图片，例如

img(src=require('./assets/bg-banner.jpg'))

在main.ts中引入index.pug

const template: any = require('./index.pug')
document.getElementById('app').innerHTML = template()

然后发现css中的图片路径不对......

修改一下相关的配置就好了。

// webpack.config.js
{
  test: /\.scss$/,
   use: [
       // 增加路径处理
     {
       loader: MiniCssExtractPlugin.loader,
       options: {
         publicPath: '../'
       }
     },
     'css-loader',
     'postcss-loader',
     'sass-loader'
   ]
}

10、配置开发环境

webpack-dev-server 能够用于快速开发应用程序。

安装相应的依赖

npm install --save-dev webpack-dev-server

配置`webpack.config.js`

module.exports = {
    // 更多配置参考：https://www.webpackjs.com/configuration/dev-server/
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true, // 一切服务都启用gzip压缩
        port: 8090, // 服务启动端口
    }
}

配置`package.json`

{
    "script": {
        "serve": "webpack-dev-server --open --mode development"
    }
}

--open：直接在浏览器打开服务。

11、`webpack`流水线进阶工作报告

剧本暂无、日期未定、敬请期待。