Webpack一些知识点

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};

entry：指定你的项目的入口。默认为src下的index.html

output: 指定转译之后的文件夹，以及转译之后index.html 应该叫什么名字

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');

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

这边文件名改了，变成了 [ ].[ ].js 

得到的转译文件变成了 main.xasd234234dskfh.js  这涉及到HTTP缓存的问题。

举例：比如的网页加载了三个CSS，使用缓存可以放在CSS里面。下次打开直接使用缓存。那么如何通知用户请求的网页CSS改变了？    更改CSS的文件名，使用哈希MD5一下，每次只要你更改了，那么编译后的文件名都是不一样的。然后浏览器发现这次请求的CSS文件名不一样，就会去更新CSS。

 

所以每次运行webpack都要把dist删掉。很麻烦，但是可以避免

在package.json文件里的“script”下面写上：再构件时，删除dsit，并且再次打包。

意思是：你只有直接 npm run build 就可以了。这个build代表着 “rm -rf dist && webpack”

 

那么JS以已经可以生成了，那么如何构件生成HTML文件？

先安装plugin

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

问题来，只构建了默认的，但是我们要指定自己的HTML模板，怎么办 ？

在template里指定你的HTML文件，那么就会按照你的模板文件来生成文件。注意，模板中的tittle可以指定：

 

接下来试试引入CSS