1. npm初始化项目

1. 初始化项目

npm install -y

2. 新建源代码目录 新建src源代码目录，在src目录创建index.html首页

2. 在项目中安装和配置webpack

1. 运行 npm install webpack webpack-cli -D 命令，安装 webpack 相关的包
2. 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件
3. 在 webpack 的配置文件中，初始化下的基本配置

module.exports = {
    mode: 'development' // mode 用来指定构建模式
}

4. 在 package.json 配置文件中的 scrips 节点下，新增 dev 脚本

"dev": "webpack" // script节点下的脚本，可以通过 npm run 执行

配置打包的入口与出口

webpack 4.x 版本中默认约定

• 打包的入口文件为 src -> index.js
• 打包的输出文件为 dist -> main.js

修改打包文件的入口和出口，可以在 webpack.config.js 中新增如下配置信息

const path = require('path')    // node.js 中专门操作路径的模块
module.exports = {
    // 编译模式
    mode: 'development', // mode 用来指定构建模式
    entry: path.join(__dirname, './src/index.js'),   // 打包入口文件
    output: {
        path: path.join(__dirname, './dist'), // 输出文件的存放位置
        filename: './bundle.js'   // 输出文件的名称
    }
}

3. 自动打包

安装 webpack-dev-server

npm i webpack-dev-server -d

修改 package.json 文件，将scripts修改为下面

scripts: {
     "dev": "webpack-dev-server"
}

配置 webpack-config.js 文件

module.exports = {
    devServer: {
        static: {
            directory: path.join(__dirname, 'src'),
          },
          compress: true,
          port: 9000,
    }
}

导入 /bundle.js 文件