创建基本的webpack4.x项目

1. 运行npm init -y 快速初始化项目

2. 在项目根目录创建src源代码目录和dist产品目录

3. 在 src 目录下创建 index.html

4. 使用 cnpm 安装 webpack ，运行cnpm i webpack webpack-cli -D

   如何安装 cnpm: 全局运行 npm i cnpm -g

5. 注意：webpack 4.x 提供了 约定大于配置的概念；目的是为了尽量减少 配置文件的体积；
   默认约定了：

• 打包的入口是src -> index.js

• 打包的输出文件是dist -> main.js

• 4.x 中 新增了 mode 选项(为必选项)，可选的值为：development 和 production;

    module.exports = {
        mode : 'development', //development  production 
    }
  

6. 运行 webpack

7. "dev" : "webpack-dev-server" ==> 运行 npm run dev

8. index中引入main.js问题

   webpack-dev-server打包好的main.js是托管到了内存中,所以在项目根目录中看不到,但是我们可以认为,在根目录中有一个看不见的main.js

   <script src="../dist/main.js"></script> ==> <script src="/main.js"></script>

9. 自动打开： "dev" : "webpack-dev-server --open --port 3000 --hot --progress --compress"

10. 默认在src下打开

i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /

• 安装npm i html-webpack-plugin -D

• 在webpack.config.js中进行配置

  const path = require('path')
  const HtmlWebpackPlugin = require('html-webpack-plugin') //导入在内存中自动生成index页面的插件
  
  //创建一个插件的实例对象
  const htmlPlugin = new HtmlWebpackPlugin({
      template:path.join(__dirname,'/src/index.html'), //源文件
      filename:'index.html' //生成的内存中首页的名称
  })
  
  module.exports = {
      mode : 'development', //development  production
      plugins:[
          htmlPlugin
      ]
  }