webpack使用记录

开发环境记录

全局安装命令：npm install --global webpack

项目中安装：npm install webpack webpack-cli --save-dev

Package.json中设置"private": true,防止意外发布代码

安装生产环境安装包使用npm install --save

开发环境使用npm install --save-dev

配置文件 webpack.config.js

压缩cssnpm install --save-dev style-loader css-loader

压缩图片 npm install --save-dev file-loader

更新html的引入的文件名 npm install --save-dev html-webpack-plugin

清除dist文件 npm install clean-webpack-plugin --save-dev

开启web服务器 npm install --save-dev webpack-dev-server

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: {
     app: './src/index.js',
     print: './src/print.js'
  },
   plugins: [
        new CleanWebpackPlugin(), 
        //官方实例传值无限报错因为新版原因无需传值就是删除output下的文件
        new HtmlWebpackPlugin({
        title: 'Output Management'
        })
    ],
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname,'dist')
  },
  //检查报错来源
 devtool: 'inline-source-map',
 //动态刷新页面开启服务器 
 devServer: {
      contentBase: './dist',
      port: 3000
  },
  //压缩输出去除未使用内容
  mode: "production"
  //按需加载
  module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        {
          test: /\.(png|svg|jpg|gif)$/,
          use: [
            'file-loader'
          ]
        },
       {
         test: /\.(woff|woff2|eot|ttf|otf)$/,
         use: [
           'file-loader'
         ]
       }
      ]
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

Package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.40.2",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.8.1"
  },
  "dependencies": {
    "lodash": "^4.17.15"
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

为了更容易地追踪错误和警告，JavaScript 提供了source map 功能，将编译后的代码映射回原始源代码。如果一个错误来自于 b.js，source map 就会明确的告诉你

生产环境搭建

配置文件

- |- webpack.config.js
+ |- webpack.common.js
+ |- webpack.dev.js
+ |- webpack.prod.js

1
2
3
4

安装cnpm install --save-dev webpack-merge

代码压缩插件安装cnpm i uglifyjs-webpack-plugin -s

配置package.json

-     "start": "webpack-dev-server --open",
+     "start": "webpack-dev-server --open --config webpack.dev.js",
-     "build": "webpack"
+     "build": "webpack --config webpack.prod.js"

1
2
3
4

source map 替换

开发中为inline-source-map

+   devtool: 'source-map',
    plugins: [
-     new UglifyJSPlugin()
+     new UglifyJSPlugin({
+       sourceMap: true
+     })

1
2
3
4
5
6

避免在生产中使用 inline-*** 和 eval-***，因为它们可以增加 bundle 大小，并降低整体性能

代码分离-防止重复[CommonsChunkPlugin]

将公共依赖提取到已有入口chunk或者生成新的chunk，去除重复模块

const webpack = require('webpack');

plugins: [
      new HTMLWebpackPlugin({
        title: 'Code Splitting'
-     })
+     }),
+     new webpack.optimize.CommonsChunkPlugin({
+       name: 'common' // 指定公共 bundle 的名称。
+     })
    ],

1
2
3
4
5
6
7
8
9
10
11

← knex.js NO.1 你好，世界！ →