webpack管理输出

1.新建src/print.js,分别修改代码以下,而后执行命令 npm run build ，这以后能够在dist文件夹下看到，webpack 生成 print.bundle.js 和 app.bundle.js 文件，和在 index.html 文件中指定的文件名称相对应。在浏览器中打开 index.html，查看点击按钮时会发生什么。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') } };

View Code

2.HtmlWebpackPlugin,若是更改了一个入口起点的名称，或者添加了一个新的名称，生成的包将被重命名在一个构建中，可是index.html文件仍然会引用旧的名字。 HtmlWebpackPlugin 会用新生成的 index.html 文件，把原来的替换掉，来解决这个问题。node

　　首先安装 npm install --save-dev html-webpack-plugin ，而后修改webpack.config.js以下，执行npm run build。webpack

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。web

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 文件，以供使用。express

5.source map的使用，当 webpack 打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置。JavaScript 提供了 source map 功能，将编译后的代码映射回原始源代码。这里使用 inline-source-map 选项，在webpack.config.js中配置。npm

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" 。json

在命令行中运行 npm run watch，就会看到 webpack 编译代码，然而却不会退出命令行。这是由于 script 脚本还在观察文件。可是修改过以后，须要手动刷新浏览器。浏览器

7.webpack-dev-server 提供了一个简单的 web 服务器，而且可以实时从新加载(live reloading)。服务器

首先安装 npm install --save-dev webpack-dev-server ，修改webpack.config.js以下。app

在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中修改端口号。

安装 express 和 webpack-dev-middleware： npm install --save-dev express webpack-dev-middleware 。

webpack.config.js，output中添加 publicPath: '/'

新建server.js,内容以下。

在pockage.json的scripts中添加 "server": "node server.js" 。执行 npm run server 。在浏览器刚才打开的页面中8080端口为3000便可。

const express = require('express'); const webpack = require('webpack'); const webpackDevMiddleware = require('webpack-dev-middleware'); const app = express(); const config = require('./webpack.config.js'); const compiler = webpack(config); // Tell express to use the webpack-dev-middleware and use the webpack.config.js // configuration file as a base.
app.use(webpackDevMiddleware(compiler, { publicPath: config.output.publicPath })); // Serve the files on port 3000.
app.listen(3000, function () { console.log('Example app listening on port 3000!\n'); });

View Code