1.加载CSS

命令行输入

npm install --save-dev style-loader css-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$/,+         use: [+           'style-loader',+           'css-loader'+         ]+       }+     ]+   }  };

文件结构如下

webpack-demo  |- package.json  |- webpack.config.js  |- /dist    |- bundle.js    |- index.html  |- /src+   |- style.css    |- index.js  |- /node_modules

style.css

.hello {  color: red;}

src/index.js

import _ from 'lodash';+ import './style.css';  function component() {    var element = document.createElement('div');    // Lodash, now imported by this script    element.innerHTML = _.join(['Hello', 'webpack'], ' ');+   element.classList.add('hello');    return element;  }  document.body.appendChild(component());

命令行 npm run build

2.加载图片

npm install --save-dev file-loader

---

这里的文件结构将要发生变化，以下内容将于实际的开发调试相关

---

webpack-demo  |- package.json  |- webpack.config.js  |- /dist  |- /src    |- index.js+   |- print.js  |- /node_modules

3.HtmlWebpackPlugin 自动生成index.html

命令行

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

src/print.js

export default function printMe() {  console.log('I get called from print.js!');}

src/index.js

import _ from 'lodash';+ import printMe from './print.js';  function component() {    var element = document.createElement('div');+   var btn = document.createElement('button');    element.innerHTML = _.join(['Hello', 'webpack'], ' ');+   btn.innerHTML = 'Click me and check the console!';+   btn.onclick = printMe;++   element.appendChild(btn);    return element;  }  document.body.appendChild(component());

webpack.config.js

const path = require('path');+ const HtmlWebpackPlugin = require('html-webpack-plugin');  module.exports = {    entry: {-     index: './src/index.js',+     app: './src/index.js',+     print: './src/print.js'    },    output: {-     filename: 'bundle.js',+     filename: '[name].bundle.js',      path: path.resolve(__dirname, 'dist')    }，+   plugins: [+     new HtmlWebpackPlugin({+       title: 'Output Management'+     })+   ],  };

先删除dist/index.html,然后命令行 npm run build, 观察现象

4.Source maps

用于调试时，控制台精准定定位错误位置。这里只介绍一个简单的 'inline-source-map'。

webpack.config.js

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: 'Development'      })    ],    output: {      filename: '[name].bundle.js',      path: path.resolve(__dirname, 'dist')    }  };

5.webpack-dev-server 热更新

首先命令行

npm install --save-dev webpack-dev-server

webpack.config.js

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: 'Development'      })    ],    output: {      filename: '[name].bundle.js',      path: path.resolve(__dirname, 'dist')    }  };

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"    }  }

最后 npm start 启动热加载，更改文件浏览器会自动刷新。

关于热加载的配置还可以使用 watch mode 和webpack-dev-middleware。 其中watch mode就是在package.json文件的"scripts"属性下添加

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