webpack流水線基礎工做報告

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

緣由：webpack雖然接觸的多，但沒有從零開始配置過項目。通常都是經過各類CLI工具生成項目(VueCli)，webpack已經由cli工具配置好了，在實際的開發中，遇到的相關問題都只要針對性的去查找資料基本都能解決，因此對webpack的瞭解一直都比較片面和瑣碎，缺少一個總體性的瞭解，更沒法談「理解」了。

之前都是跳着走的，如今趁着不是很忙，回到起點從新走一下吧。

一、初始化項目

首先建立一個項目文件夾，如webpack-demo

在根目錄下執行：

npm init -y
複製代碼

初步設置項目的目錄結構和功能劃分

// 建立如下文件夾和文件
public/
    index.html       	// 模板文件
src/                    // 工做區
    assets/             // 圖片、外部樣式等資源
    module/             // 頁面模塊
    main.js            	// 入口文件
webpack.config.js   	// webpack配置文件
複製代碼

二、初步配置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

打包成功:)

三、配置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' // 修改文件後綴
        })
    ]
}

複製代碼

四、配置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"]
}
複製代碼

五、配置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"
    ]
}
複製代碼

六、配置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
        })
    ]
}
複製代碼

七、配置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'
        ]
      }
    ]
  }
}
複製代碼

八、配置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
複製代碼

九、配置對圖片資源的處理

安裝相應的依賴

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'
   ]
}
複製代碼

十、配置開發環境

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：直接在瀏覽器打開服務。

十一、webpack流水線進階工做報告

劇本暫無、日期未定、敬請期待。