1.新建src/print.js,分别修改代码如下,然后执行命令 npm run build ，这之后可以在dist文件夹下看到，webpack 生成 print.bundle.js 和 app.bundle.js 文件，和在 index.html 文件中指定的文件名称相对应。在浏览器中打开 index.html，查看点击按钮时会发生什么。
print.js
export default function printMe() {
console.log(‘这段来自print.js!‘);
}
index.js
import _ from ‘lodash‘;
import print from ‘./print.js‘;
function component() {
var element = document.createElement(‘div‘);
var btn = document.createElement(‘button‘);
element.innerHTML = _.join([‘Hello‘, ‘webpack‘], ‘ ‘);
btn.innerHTML = ‘点击!‘;
btn.onclick = print;
element.appendChild(btn);
return element;
}
document.body.appendChild(component());
const path = require(‘path‘);
webpack.config.js
module.exports = {
entry: {//入口文件
app: ‘./src/index.js‘,
print: ‘./src/print.js‘
},
output: {//输出文件
filename: ‘[name].bundle.js‘,
path: path.resolve(__dirname, ‘dist‘)
}
};
2.HtmlWebpackPlugin,如果更改了一个入口起点的名称，或者添加了一个新的名称，生成的包将被重命名在一个构建中，但是index.html文件仍然会引用旧的名字。 HtmlWebpackPlugin 会用新生成的 index.html 文件，把原来的替换掉，来解决这个问题。
首先安装 npm install --save-dev html-webpack-plugin ，然后修改webpack.config.js如下，执行npm run build。
const path = require(‘path‘);
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
module.exports = {
entry: {//入口文件
app: ‘./src/index.js‘,
print: ‘./src/print.js‘
},
plugins:[
new HtmlWebpackPlugin({
title: ‘Output Management‘
})
],
output: {//输出文件
filename: ‘[name].bundle.js‘,
path: path.resolve(__dirname, ‘dist‘)
}
};
3.清理 /dist 文件夹 npm install clean-webpack-plugin --save-dev clean-webpack-plugin在每次构建前清理 /dist 文件夹。webpack.config.js加入代码如下，执行npm run build。
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({
title: ‘Output Management‘
})
],
output: {
filename: ‘[name].bundle.js‘,
path: path.resolve(__dirname, ‘dist‘)
}
};
4.通过 manifest，webpack 能够对「你的模块映射到输出 bundle 的过程」保持追踪，使用 WebpackManifestPlugin，可以直接将数据提取到一个 json 文件，以供使用。
5.source map的使用，当 webpack 打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置。JavaScript 提供了 source map 功能，将编译后的代码映射回原始源代码。这里使用 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: ‘Output Management‘
})
],
output: {//输出文件
filename: ‘[name].bundle.js‘,
path: path.resolve(__dirname, ‘dist‘)
}
};
6.可以指示 webpack "watch" 依赖图中的所有文件以进行更改。如果其中一个文件被更新，代码将被重新编译，不必手动运行整个构建。在pockage.json的scripts中添加 "watch": "webpack --watch" 。
在命令行中运行 npm run watch，就会看到 webpack 编译代码，然而却不会退出命令行。这是因为 script 脚本还在观察文件。但是修改过之后，需要手动刷新浏览器。
7.webpack-dev-server 提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。
首先安装 npm install --save-dev webpack-dev-server ，修改webpack.config.js如下。
在pockage.json的scripts中添加 "start": "webpack-dev-server --open", 然后 npm start 。此时端口号为8080。
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‘)
}
};
8.webpack-dev-middleware使用。webpack-dev-middleware 是一个容器(wrapper)，它可以把 webpack 处理后的文件传递给一个服务器(server)。 webpack-dev-server 在内部使用了它，同时，它也可以作为一个单独的包来使用，以便进行更多自定义设置来实现更多的需求。可以在创建的serverjs中修改端口号，具体这里不写了，以后想写再补上，先百度 。
原文地址：https://www.cnblogs.com/vipp/p/9881846.html