Demo3操作手册

本Demo演示如何配合各种plugin进行偏复杂的使用

准备环境

初始化环境, cd到demo1目录之后, 执行如下命令:

npm init -y
npm install webpack webpack-cli -D

继续使用上一个level的目录机构以及环境:

npm install typescript ts-loader node-sass sass-loader css-loader style-loader -D

新建tsconfig.json, 内容如下:

{
  "compilerOptions": {
    "target": "es5"
  }
}

L4 UglifyjsWebpackPlugin

顾名思义, 该插件是用来对js进行丑化处理, 使其难以阅读以提升代码的安全性, 安装该插件:

npm install uglifyjs-webpack-plugin -D

新建src目录并且新建如下三个文件:

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Webpack</title>
</head>
<body>
  <button class="red" id="btn">HAHAHA</button>
</body>
</html>

// index.ts
import './index.scss';
class Demo2 {
  Name: string;
  constructor() {
    this.Name = 'Demo2';
  }
  L2() {
    console.log(`I'm demo for ts-loader, come from ${this.Name}`);
  }
}
const demo = new Demo2();
const btn = document.querySelector('#btn');
btn.addEventListener('click', demo.L2);

// index.scss
$bgColor: bisque;
body {
  background-color: $bgColor;
  .red {
    background-color: red;
  }
}

新建webpack.config.js, 内容如下:

var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'output.js'
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader'
      }, {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader' //将JS字符串生成style节点
          }, {
            loader: 'css-loader' //将Css转换为CommonJs模块
          }, {
            loader: 'sass-loader' //将Sass编译成Css
          }
        ]
      }
    ]
  },
  plugins: [
    new UglifyJsPlugin()
  ]
}

执行打包命令之后, 大功告成.

L5 HtmlWebpackPlugin

该插件用来给你创建HTML文件或者使用模版来添加相关节点的, 安装该插件:

npm install html-webpack-plugin -D

使用模板的用法

修改webpack.config.js如下:

var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
var HtmlwebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'output.js'
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader'
      }, {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader' //将JS字符串生成style节点
          }, {
            loader: 'css-loader' //将Css转换为CommonJs模块
          }, {
            loader: 'sass-loader' //将Sass编译成Css
          }
        ]
      }
    ]
  },
  plugins: [
    new UglifyJsPlugin(),
    new HtmlwebpackPlugin({
      template: './src/index.html'
    })
  ]
}

创建文件的用法

将HtmlwebpackPlugin的参数修改如下:

// 原来
new HtmlwebpackPlugin({
  template: './src/index.html'
})
// 更新
new HtmlwebpackPlugin({
  title: 'Demo3-L5',
  filename:'index.html'
})

执行打包命令之后, 大功告成.

L6

现在涉及到了html了, 我们要查看效果需要到编译输出的目录中双击打开来查看, 可以安装webpack-dev-server来实时查看, 安装:

npm install webpack-dev-server -D

修改package.json内容如下:

{
  "name": "demo3",
  "version": "1.0.0",
  "description": "基础plugin的使用",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --open",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.2.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "ts-loader": "^6.2.1",
    "typescript": "^3.6.4",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.9.0"
  }
}

接下来我们使用如下命令, 即可查看效果:

npm run dev

大功告成.

如下