webpack从0到1的配置（二）

阅读本篇博客需要预先阅读webpack从0到1的配置（一）。

接着上篇博客讲plugins。

• 我们希望在打包后的项目里有index.html文件，并且自动引入main.js文件
• 这里需要安装插件html-webpack-plugin
• npm install html-webpack-plugin --save-dev
• 修改webpack.config.js文件

const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: {
    main: './src/main.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  + plugins: [
  +  new HtmlWebpackPlugin({
  +   title: 'index', // <title>标签的内容
  +   template: './index.html', // 以哪一个html为模版
  +  }),
  +]
}

• 现在再执行一次npm run build 
• dist文件夹下生成了一个index.html文件，并且自动引入了mian.js文件。浏览器打开index.html,文字为红色

理解webpack打包思想：

• 我们现有的src目录下还有一个home.js的文件呢，现在在home.js的文件里写入

module.exports = {
    text: '我是home'
}

• 修改mian.js文件为

+ const home_text = require('./home');
  const text_p = document.getElementById('text-p');
  text_p.style.color = 'red';
+ text_p.innerHTML = home_text.text;

• 再次执行npm run build
• 浏览器打开dist目录下的index.html文件，可见文字被更改为'我是home‘，但是dist目录下依然只有main.js和index.html文件
• webpack打包就是以main.js文件为入口，找到mian.js文件里引入的所有模块，打包成一个或多个文件。
• 继续学习webpack从0到1的配置（二）