Webpack操作手册

Webpack 配置

1. 需要在项目下执行如下命令来生成 package.json 文件，这个文件是用于管理项目所依赖的文件和执行打包的命令

npm init -y

2. 安装依赖，执行如下的命令来安装依赖

npm i -D webpack webpack-cli typescript ts-loader

3. 在项目根目录下创建 webpack.config.js 文件，在这个文件中编写 Webpack 的相关配置
4. 在项目根目录下创建 tsconfig.json 文件，内容如下：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ES6",
    "strict": true
  }
}

5. 在 webpack.json 文件中添加打包的命令，该命令添加到 scripts 项中。

{
  "scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

6. 在项目的根目录下创建 src 目录，并在这个目录下创建 ts 文件

const nums: number = 10
console.log(nums);

7. 执行如下命令来进行打包

npm run build

如果希望打包的文件自动添加到 html 文件中，则需要安装 html-webpack-plugin 插件。

1. 下载依赖
   执行如下命令来安装这个插件：

npm i -D html-webpack-plugin

2. 修改 webpack.config.js 文件，在文件中添加插件的配置信息

// 引入 html-webpack-plugin 插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

//................

// 配置 webpack 插件
plugins: [
    new HtmlWebpackPlugin({
        // 指定所用的模板文件
        template: 'src/index.html'
    })
]

3. 执行打包命令

npm run build

如果希望编译后自动打开浏览器，那么需要安装如下的依赖

1. 安装依赖

npm i -D webpack-dev-server

2. 在 webpack.json 文件中添加配置，也是添加到 scripts 标签中

{

    "scripts": {
        "build": "webpack",
        "start": "webpack serve --open chrome.exe",
        "test": "echo \"Error: no test specified\" && exit 1"
    }

}

3. 执行如下的命令来启动

npm start