webpack管理输出

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')
  }
};

View Code

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

安装 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!
');
});

View Code