项目中安装和配置webpack

利用webpack进行打包

1. 打开项目目录终端，输入命令:

npm install webpack webpack-cli -D

2. 然后在项目根目录中，创建一个 webpack.config.js 的配置文件用来配置webpack, 在 webpack.config.js 文件中编写代码进行webpack配置，如下：

module.exports = {
	mode:"development" // 可以设置为development(开发模式), production(发布模式)
}

补充：

• mode设置的是项目的编译模式。
  • 如果设置为development则表示项目处于开发阶段，不会进行压缩和混淆，打包速度会快一些
  • 如果设置为production则表示项目处于上线发布阶段，会进行压缩和混淆，打包速度会慢一些

3. 修改项目中的package.json文件添加运行脚本dev，如下：

"scripts":{
	"dev":"webpack"
}

配置完成，进行测试
命令行键入命令

npm run dev

打包成功过图


打包成功！！！

设置打包的入口与出口

若想要改变打包的js文件的入口和出口，进行如下设置
将webpack.config.js文件进行如下配置

const path = require('path')
module.exports = {
    //编译模式
    mode: 'development',// development production
    // 入口文件
    entry: path.join(__dirname, './src/index.js'),
    // 出口文件
    output: {
        path: path.join(__dirname, './dist'), // 输出文件的存放路径
        filename: 'bundle.js' // 输出的名字
    }
}

自动打包

想要进行打包时需要进行npm安装自动打包的工具

npm install webpack-dev-server -D

修改package.json中的文件中的

"scripts":{
	"dev":"webpack"
}

更改为

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

html中的引入打包后的文件更改为

<script src='/buldle.js'><script>

运行下述代码进行打包

npm run dev

显示如下内容即成功运行，直接访问http://localhost:8080即可看到。

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