webpack：入门教程重构

调整项目目录

  webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
  |- /src
    |- index.js
    |- print.js  创建print.js
  |- /node_modules

修改项目文件

src/print.js

export default function printMe() {
  console.log('I get called from print.js!');
}

src/index.js

  import $ from 'jquery';
  import printMe from './print.js';

webpack.config.js

  const path = require('path');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

使用npm脚本

npm run build

此时访问index.html已经使用了webpack 生成 print.bundle.js 和 app.bundle.js 文件，对应 index.html 中引用的文件。当webpack.config.js中entry里配置的名称更改时，webpack会自动构建生成新的打包文件，但index.html中仍然会引用旧的路径。

HtmlWebpackPlugin 

安装html-webpack-plugin

npm install --save-dev html-webpack-plugin

webpack.config.js

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');//引入插件

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    plugins: [ //配置插件
      new HtmlWebpackPlugin()
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

使用npm脚本

npm run build

此时index.html被 webpack 替换成了一个重新生成的文件，并自动引用了 print.bundle.js 和 app.bundle.js 。

清理冗余文件

安装clean-webpack-plugin

npm install clean-webpack-plugin --save-dev

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'
    },
    plugins: [
      new CleanWebpackPlugin(['dist']), //配置插件
      new HtmlWebpackPlugin()
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

使用npm脚本

npm run build

此时项目中的dist目录下只包含重新构建生成的文件，旧文件已经被删除。

开发环境配置