1.新建src/print.js,分别修改代码如下,然后执行命令 npm run build ，这之后可以在dist文件夹下看到，webpack 生成 print.bundle.js 和 app.bundle.js 文件，和在 index.html 文件中指定的文件名称相对应。在浏览器中打开 index.html，查看点击按钮时会发生什么。
print.jsexport default function printMe() { ???console.log(‘这段来自print.js!‘); ?}index.jsimport _ 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.jsmodule.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中修改端口号，具体这里不写了，以后想写再补上，先百度 。
webpack管理输出
原文地址：https://www.cnblogs.com/vipp/p/9881846.html