创建基本的webpack4.x项目

webpack4.x项目的搭建

项目搭建步骤：

• 创建文件夹：mkdir webpack-base
• 进入文件夹： cd webpack-base
• 初始化默认的package.json文件：npm init -y
• 在项目根目录安装webpack：npm install –D webpack
• 安装webpack-cli： npm install –D webpack-cli
  
  • webpack 已经将 webpack 命令行相关的内容都迁移到 webpack-cli，所以除了 webpack 外，我们还需要安装 webpack-cli（注意：在安装webpack和webpack-cli的时候，两这需同时全局或者局部安装，否则会一直报错： Error: Cannot find module ‘webpack-cli’）
  • cnpm i webpack webpack-cli -g 同时全局安装
  • cnpm i webpack webpack-cli -D 同时在项目目录安装
• 在项目根目录创建一个src目录
  
  • 里面创建一个src/index.html文件
  • 里面创建一个src/index.js文件
• 在项目根目录创建webpack.config.js配置文件
  
  • webpack4.x 默认从项目根目录下的 ./src/index.js 中加载入口模块(特性：约定大于配置)
  • 设置webpack.config.js的mode模块，两种模式
  • 

    module.exports = {
        mode: 'development' // development 开发模式 production 生产模式
    }

• 最后执行webpack进行打包，生成 dist/main.js目录，将main.js引入index.html中即可。
• ps: webpack4.x提供了约定大于配置的概念，目的是为了尽量减少配置文件的提交。
  
  • 默认约定了：
    
    • 打包的入口是：src => index.js
    • 打包的输出文件是：dist => main.js
• 实时刷新：
  
  • webpack-dev-server配置： npm install webpack-dev-server -g
  • 项目局部安装：npm install webpack-dev-server -D
  • 在package.json文件中的”scripts”中加入："dev": "webpack-dev-server --open --port 3000 --hot"
  • 运行npm run dev
  • 如果出现以下错误：Cannot find module ‘source-map-resolve’
    
    • 则执行：cnpm install -g source-map-resolve和cnpm install -D source-map-resolve
  • 如果继续出现下面错误：Error: Cannot find module ‘extglob’
    
    • 则安装：cnpm install -D extglob
  • 如果浏览器并没有刷新是因为：webpack-dev-server 构建的 main.js 其实是在 http://localhost:8080/main.js 的位置
    
    • 所以直接在index.html中引入:<script src="/main.js"></script>
• 将index.html也放到内存中，减少磁盘的损耗: cnpm i html-webpack-plugin -D
  
  • 在 webpack.config.js中引入并 配置导出
    
  • 该操作 直接将index.html放到了内存中，并自动引入了自动打包生成的main.js文件