webpack常用配置

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 scriptelement.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",},
.......