項(xiàng)目的依賴

開發(fā)依賴(devDependencies)： webpack, webpack-cli

項(xiàng)目的默認(rèn)結(jié)構(gòu)：

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

webpack.config.js的默認(rèn)配置：

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

生成調(diào)試使用的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
            }
          }
        ]
      }
    ]

內(nèi)聯(lián) 方式的loader

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

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

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

import $ from 'jquery'

這種方式是以局部變量的方式，引入，如：BootStrap）。

2. 采用expose-loader進(jìn)行引入

該模塊的作用是用來將模塊以全局變量的方式引入

cnpm i -D expose-loader

此時(shí)引入的代碼：

import 'expose-loader?$!jquery

如果引入lodash可以采用

import 'expose-loader?_!lodash

url-loader和file-loader

1. 它們的基本作用都是可以圖片，字體，矢量引入。
2. 但url-loader更加智能的，可以設(shè)定一個(gè)閥值，來確定使用base64編譯還是原生值來進(jìn)行加載，配置如下：

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

構(gòu)建前清理dist文件夾

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

自動(dòng)生成html

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

• 其中的三個(gè)參數(shù)都可能省略。
• filename: 表示dist/index.html
• template: 表示項(xiàng)目根下的index.html
• inject: 表示script腳注入的位置，可選為body和head

控制輸出文件的數(shù)量

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

此時(shí)，在dist中生成的文件列表如下：

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

添加文件監(jiān)視功能

1. 在package.json中：

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

2. 運(yùn)行：

npm run watch

增加調(diào)試的web server（自帶文件監(jiān)視功能）

1. 安裝

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

2. 在webpack.config.js

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

• 以上幾項(xiàng)都是默認(rèn)項(xiàng)（可以零配置）
• hot 表示熱更新，即自動(dòng)刷新網(wǎng)頁

3. 在package.json中

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

4. npm start