1 安裝環(huán)境

npm install --save-dev webpack
npm install --save-dev webpack-cli

2 npm 初始化

npm init -y
npm install webpack webpack-cli --save-dev

3 修改package.json文件

• 設(shè)置 "private": true 使 安裝包私有的(private)，
• 在 script 添加 "build": "webpack"
  可以使項(xiàng)目打包時(shí) 自動(dòng)查找 webpack.config.js 文件， 有的話就進(jìn)行打包

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0"
  },
  "dependencies": {
    "lodash": "^4.17.10"
  }
}

• 運(yùn)行 npm run build 打包

處理 css文件 js 文件 圖片等資源

基本的webpack 只能處理 js 文件， 但可以通過在 webpack.config.js 配置 module 來實(shí)現(xiàn)對(duì) css js 圖片的處理

• 安裝 x-loader 文件
  加載 css文件

npm install --save-dev style-loader css-loader

加載圖片

npm install --save-dev file-loader

加載數(shù)據(jù)

npm install --save-dev csv-loader xml-loader

webpack.config.js配置如下

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/, //css處理
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,  //圖片處理
        use: [
          'file-loader'
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,  //字體處理
        use: [
          'file-loader'
        ]
      },
      // 數(shù)據(jù)處理
      {
        test: /\.(csv|tsv)$/,
        use: [
          'csv-loader'
        ]
      },
      {
        test: /\.xml$/,
        use: [
          'xml-loader'
        ]
      }
    ]
  }
};

資源管理

• HtmlWebpackPlugin插件介紹

  • 可以把webpack.config.js 中的 entry 文件處理生成 一個(gè)以 xx.html 開頭的文件

• clean-webpack-plugin --save-dev 插件介紹

  • 每次打包都會(huì)先刪除以前存在的打包資源，重新打包新的資源。

• 安裝 插件

npm install --save-dev html-webpack-plugin
npm install clean-webpack-plugin --save-dev

• webpack.config.js 配置 plugins

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(['dist']), // 刪除已存在的打包資源
    new HtmlWebpackPlugin({ // 將資源打包成一個(gè)以 'Output Management'開頭的html文件
      title: 'Output Management'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

開發(fā)

• 通過 source map 可以定位錯(cuò)誤位置
  • webpack 是通過 devtool 來實(shí)現(xiàn)定位代碼錯(cuò)誤位置的

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'
  },
  devtool: 'inline-source-map',
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'Output Management'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  }
};

• 使用 webpack-dev-server 實(shí)時(shí)重新加載
  • webpack.config.js 添加 devServer

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'
  },
  devtool: 'inline-source-map',
+ devServer: {
+    contentBase: './dist'
+  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'Output Management'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  }
};

以上配置告知 webpack-dev-server，在 localhost:8080 下建立服務(wù)，將 dist 目錄下的文件，作為可訪問文件。

• 添加一個(gè) script 腳本
  package.json 文件配置

{
    "name": "development",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.config.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "start": "webpack-dev-server --open",
      "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "clean-webpack-plugin": "^0.1.16",
      "css-loader": "^0.28.4",
      "csv-loader": "^2.1.1",
      "file-loader": "^0.11.2",
      "html-webpack-plugin": "^2.29.0",
      "style-loader": "^0.18.2",
      "webpack": "^3.0.0",
      "xml-loader": "^1.2.1"
    }
  }

• 然后可以運(yùn)行 npm run start

模塊熱替換

• 修改 webpack.config.js

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

module.exports = {
  entry: {
    app: './src/index.js'
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
+    hot: true // https://www.webpackjs.com/configuration/dev-server/#devserver-hot
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'Hot Module Replacement'
    }),
+    new webpack.NamedModulesPlugin(),//用于啟動(dòng)HMR時(shí)可以顯示模塊的相對(duì)路徑
+    new webpack.HotModuleReplacementPlugin() //hot module replacement 啟動(dòng)模塊熱替換的插件
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

• 入口文件添加 條件設(shè)置

+ if (module.hot) {
+   module.hot.accept('./print.js', function() {
+     更新代碼
+   })
+ }

官網(wǎng)上配置的，好像不寫也能運(yùn)行

• npm run start

個(gè)人github