vscode 项目中安装配置webpack及其插件

1.安装webpack

在终端运行如下的命令，安装webpack相关的两个包：

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

-D表示：npm安装完这两个包之后将它们保存到devDependencies内

补充：

“dependencies”这个节点里面记录的是 项目在开发和上线阶段都需被用到的包

“devDependencies”这个节点里面记录的是 只在开发阶段会被用到的包

-S 是 --save的简写

-D 是 --save-dev的简写

如何知道是用-S还是-D？ 查阅官方文档！https://www.npmjs.com/package/webpack

2.配置webpack

1）.在项目根目录下，创建名为webpack.config.js的webpack配置文件，并初始化

module.exports ={
    // 代表webpack运行的模式，可选值有两个 developmnet和prodution
    mode:'development'
}

2）.在package.json的script节点下，新增dev脚本

 "scripts": {
    "dev":"webpack --mode development" // --mode development这个一定要加上，不然会警告！

  }

3）.终端使用npm run dev命令，启动webpack进行项目的打包构建

npm run dev

 如果你能看见你多了一个dist文件夹那么就说明成功了！

---

3.webpack中的默认约定

1）默认的打包入口文件为src-->index.js

2)默认的输出文件路径为dist-->main.js

注意：可以在webpack.config.js 中修改打包的默认约定

4.自定义打包的入口和出口

在webpack.config.js配置文件中，通过entry节点指定打包的入口。通过output节点指定打包的节点。

const path  = require('path')

module.exports ={
//    mode 代表webpack运行的模式，可选值有两个development和production,
// prodution 的代码会被压缩
    mode: 'development',
    // entry:'指定要处理哪个文件'
    entry: path.join(__dirname,'./src/index.js'),
    output: {
        // 存放目录 这个path代表属性
        paht: path.join(__dirname,'dist'),
        // 生成的文件名
        filename: 'bundle.js'

    }
}

到目前为止，我们每修改一次代码，都要重新运行npm run dev的指令，非常的麻烦。为此，我们可以下载个插件来解决这个问题。

5.配置webpack-dev-server、webpack-cli插件

1）修改package.json->scripts中的dev命令

 "scripts": {
    "dev": "webpack serve --mode development"
  }

2）在终端安装webpack-dev-server、webpack-cli插件

npm install webpack-dev-server@3.11.2 -D
npm install webpack-cli@4.9.2 -D

3）再次运行npm run dev命令，重新进行项目打包

之后再修改源代码的内容，就会自动进行打包了

4）将index.html文件中js的引入路径修改为

    <script src="/main.js"></script>
    //main.js是打包之后dist里面的js文件

5）需要在浏览器中访问 地址http://localhost:8080/，查看自动打包效果

注意：webpack-dev-server 会启动一个实时打包的http服务器

点击src即可打开页面。 

这样以后修改源代码就可以直接看见效果了！

6）终止操作：Ctrl+C

如果想再次打开自动打包，需要重新运行npm run dev

6安装html-webpack-plugin插件

1）安装html-webpack-plugin运行命令：

npm install html-webpack-plugin@5.3.2 -D

2）配置html-webpack-plugin：

// 1.导入html-webpack-plugin 这个插件，得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')
// 2.new 构造函数，创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
    // 指定复制哪个页面
    template: './src/index.html',
    // 指定复制出来的文件名和存放路径
    filename: './index.html'
})


module.exports ={
//    mode 代表webpack运行的模式，可选值有两个development和production,
// prodution 的代码会被压缩
    mode: 'development',
    // entry:'指定要处理哪个文件'
    entry: path.join(__dirname,'./src/index.js'),
    output: {
        // 存放目录 这个path代表属性
        paht: path.join(__dirname,'dist'),
        // 生成的文件名
        filename: 'bundle.js'

    } ,
    //3. 插件的数组，将来webpack在运行时，会加载并调用这些插件
    plugins: [htmlPlugin]
}

3）html-webpack-plugin解惑

通过HTML插件复制到项目根目录中的index.html页面，也被放到了内存中。

HTML插件生成的index.html页面，自动注入了打包的index.js文件。