Webpack使用的备忘

项目的依赖

开发依赖(devDependencies)： webpack, webpack-cli

项目的默认结构：

1. 入口：/src/index.js
2. 出口：/dist/main.js

webpack.config.js的默认配置：

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

生成调试使用的source map

devtool: 'source-map'

加入loader的配置

module: {
        rules: [
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
            {test: /\.png$/, use: ['file-loader']}
        ]
    }

更具体化的loader配置

rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]

内联 方式的loader

import Styles from 'style-loader!css-loader?modules!./styles.css';

全局方式的引入（以JQuery为例）

1. 引正常的模块引入的方式：

import $ from 'jquery'

这种方式是以局部变量的方式，引入，如：BootStrap）。

2. 采用expose-loader进行引入

该模块的作用是用来将模块以全局变量的方式引入

cnpm i -D expose-loader

此时引入的代码：

import 'expose-loader?$!jquery

如果引入lodash可以采用

import 'expose-loader?_!lodash

url-loader和file-loader

1. 它们的基本作用都是可以图片，字体，矢量引入。
2. 但url-loader更加智能的，可以设定一个阀值，来确定使用base64编译还是原生值来进行加载，配置如下：

            {
                test: /\.(png|svg|jpg|jpeg|gif)$/,
                loader: 'url-loader',
                options: {
                    limit: 12000
                }
            }

构建前清理dist文件夹

const CleanWebpackPlugin = require('clean-webpack-plugin');
...
plugins: [
         new CleanWebpackPlugin()
    ]

自动生成html

const HtmlWebpackPlugin = require('html-webpack-plugin');
...
plugins: [
        new HtmlWebpackPlugin({
            filename:'index.html',
            template: 'index.html',
            inject:'body'
        })
    ],

• 其中的三个参数都可能省略。
• filename: 表示dist/index.html
• template: 表示项目根下的index.html
• inject: 表示script脚注入的位置，可选为body和head

控制输出文件的数量

entry: {
        app: "./src/index.js",
        math: "./src/math.js"
    },
output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, 'dist')
    },

此时，在dist中生成的文件列表如下：

dist/app.bundle.js
dist/math.bundle.js

添加文件监视功能

1. 在package.json中：

"scripts": {
    "watch": "webpack --watch",
 ...

2. 运行：

npm run watch

增加调试的web server（自带文件监视功能）

1. 安装

cnpm install --save-dev webpack-dev-server

2. 在webpack.config.js

devServer: {
        contentBase: './dist',
        host: 'localhost',
        port: 8080,
        hot:true
    },

• 以上几项都是默认项（可以零配置）
• hot 表示热更新，即自动刷新网页

3. 在package.json中

"scripts": {
    "start": "webpack-dev-server --open",

4. npm start