webpack基本环境搭建

webpack基本环境搭建

初始化目录
创建一个文件夹
新建一个文件夹并打开cmd工具
初始化仓库
npm init

安装模块

npm i --save-dev webpack@4.43.0 webpack-cli@3.3.12

创建关键文件夹及文件(入口文件)
在根目录创建src文件夹，并在src中创建index.js，这是我们的入口文件
package.json中配置脚本

{
  "scripts": {
    "build": "webpack --mode production"
  }
}

未来每改一次代码都需要重新build一下
创建html
在根目录中创建html引入dist中的main.js进行代码的测试（这样是不规范的）
使用自动刷新
自动刷新需要借助服务器，我们可以通过webpack-dev-server去开启一个服务 webpack.config.js

const path = require('path')
module.exports = {
  devServer: {
    // 需要把index.html也一起移动到dist根目录中（这种方式也不规范）
    contentBase: path.join(__dirname, 'dist'),
    // 默认端口，不设置是8080，我们可以单独设置其他端口
    compress: true,
    port: 8080
  }
}