关于webpack一些应用

前言

• 玩转webpack应用（持续更新！！！）

三个方面

1. 使用webpack实现typescript得自动化编译

• 先看下项目目录
  

• 
  

• src：文件夹为ts/tsx文件存放目录

  dist：ts文件编译后得js存放目录

  package.json：npm包配置文件

  tsconfig.json：typescript配置文件

  webpack.config.js：webpack配置文件

• 首先下载依赖包
  

• 全局包
  

• npm install webpack  typescript -g

• 本地包
  

• npm install typescript awesome-typescript-loader source-map-loader --save-dev

• 
  

• tsconfig.json 配置
  

• 详细参数解说，请参照：使用gulp实现typescript得自动化编译
  

• 
  

• 下面配置webpack.config.js
  

• 
  

• 其中：awesome-typescript-loader是用来编译ts文件得，也可以使用ts-loader,两者之间得区别，请参考：awesome-typescript-loader & ts-loader
  

• 配置完毕后，在src随便写一个ts，比如index.ts
  

• 
  

• 然后运行命令：webpack
  

• 
  

• 此时就会编译成功

  查看dist文件夹 就可以看出编译好得js

2. webpack打包纯ts项目

• 场景 ：当我们单纯用ts开发一个公有库时，没有了脚手架的帮助，我们需要借助webpack完成该ts项目的打包。
• 核心要点：将ts编译成js；对打包进行自定义配置
• 依赖包：
• webapck（打包工具，必须）
• ts-loader（将ts编译成js的loader，必须）
• ts-lint（检测ts代码是否规范，非必须）
• clean-webpack-plugin（每次打包时，删除上次打包的残留文件，保证打出的包整洁，非必须）
• tsconfig.json配置

• {
    "compileOnSave": false,
    "compilerOptions": {
      "outDir": "./dist/",// 打包到的目录
      "sourceMap": true,// 是否生成sourceMap（用于浏览器调试）
      "noImplicitAny": false,
      "noUnusedLocals": true,
      "noUnusedParameters": true,
      "declaration": true,// 是否生成声明文件
      "declarationDir": "./dist/types/",// 声明文件打包的位置
      "declarationMap": true,// 是否生成声明文件map文件（便于调试）
      "moduleResolution": "node",
      "module": "esnext",
      "target": "es5",// 转化成的目标语言
      "baseUrl": "./",
      "types": [
        "node",
        "jest"
      ],
      "typeRoots": [
        "./node_modules/@types"
      ],
      "lib": [
        "dom",
        "es2015"
      ],
      "jsx": "react",
      "allowJs": false
    },
    "include": [
      "src/**/*.ts"
    ],// 要打包的文件
    "exclude": [
      "node_modules",
      "*.test.ts"
    ]
  }

• webpack.config.js

• const path = require('path');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  
  // the path(s) that should be cleaned
  let pathsToClean = ['dist'];
  
  // the clean options to use
  let cleanOptions = {
      root: path.resolve(__dirname),
      // exclude: ['shared.js'],
      verbose: true,
      dry: false,
  };
  
  module.exports = {
      resolve: {
          extensions: ['.js', '.ts', '.json'],
      },
      devtool: 'source-map',// 打包出的js文件是否生成map文件（方便浏览器调试）
      mode: 'production',
      entry: {
          ‘my-ts': './src/index.ts',
      },
      output: {
          filename: '[name].js',// 生成的fiename需要与package.json中的main一致
          path: path.resolve(__dirname, 'dist'),
          libraryTarget: 'commonjs',
      },
      module: {
          rules: [
              {
                  test: /\.tsx?$/,
                  use: [
                      {
                          loader: 'tslint-loader',
                          options: {
                              configFile: path.resolve(__dirname, './tslint.json'),
                          },
                      },
                  ],
                  exclude: /node_modules/,
              },
              {
                  test: /\.tsx?$/,
                  use: [
                      {
                          loader: 'ts-loader',
                          options: {
                              // 指定特定的ts编译配置，为了区分脚本的ts配置
                              configFile: path.resolve(__dirname, './tsconfig.json'),
                          },
                      },
                  ],
                  exclude: /node_modules/,
              },
          ],
      },
      plugins: [new CleanWebpackPlugin(pathsToClean, cleanOptions)],
  };

• package.json

• {
    "name": "my-ts-project",
    "version": "1.0.0",
    "description": "",
    "main": "./dist/my-ts.js",// 需要与webpack打包出来的内容一致
    "types": "./dist/types/index.d.ts",// 需要与types文件的路径一致
    "private": false,
    "publisher": "wbjqiqi@163.com",
    "scripts": {
      "build": "tsc",
      "test": "jest"
    },
    "files": [
      "dist"
    ],// 最终发布到npm上时提交的内容
    "repository": {
      "type": "",
      "url": ""
    },
    "keywords": [
      "my-ts"
    ],
    "author": "wbjqiqi@163.com",
    "license": "MIT",
    "devDependencies": {
      "@types/jest": "^23.3.1",
      "@types/node": "^10.5.5",
      "clean-webpack-plugin": "^1.0.1",
      "jest": "^23.4.2",
      "prettier": "^1.16.4",// 优化代码格式
      "ts-jest": "^23.0.1",
      "ts-lint": "^4.5.1",
      "ts-loader": "^5.3.3",
      "tslint": "^5.11.0",
      "tslint-loader": "^3.5.4",
      "typescript": "^3.0.1",
      "webpack": "^4.28.1"
    }
  }

3. webpack引入jquery以及bootstrap方法

• 安装jquery

• npm install jquery --save-dev

•  安装bootstrap
  

• npm install bootstrap --save-dev

• 配置jQuery
  
• 由于 Bootstrap 依赖于 jQuery，所以在代码中 import jQuery from ‘jquery’ 是不够的，这只是解决了自己代码对 jQuery 的依赖，在此处使用了webpack.ProvidePlugin
  
• 解决方案：
  在 webpack.base.conf.js 头部添加
  

• var webpack = require('webpack')

• 在 entry 后边添加
  

• plugins: [
        new webpack.ProvidePlugin({
            "$": "jquery",
            "jQuery": "jquery",
            "window.jQuery": "jquery"
        })
    ]

• 引入bootstrap 在 main.js 中，加入如下代码
  

• import 'bootstrap/dist/css/bootstrap.min.css'
  import 'bootstrap/dist/js/bootstrap.min.js'

• 然后要在vue中使用bootstrap可能会报错，具体报错信息如下：
• Module not found: Error: Can’t resolve ‘popper.js’ ….错误解决办法
  
• 引入bootstrap后，webpack打包报错
  
• 这是因为使用webpack打包bootstrap4的时候，需要手动安装popper.js

• npm install bootstrap@4.0.0-beta -D
  npm install popper.js -D