webpack基本使用

基本使用

新建项目空白目录，并运行npm init -y命令初始化包管理配置文件package.json新建src源代码目录在src目录下，新建index.html首页初始化首页基本结构执行npm i webpack webpack-cli -D 安装webpack包在项目根目录创建名为webpack.config.js配置文件，并在该文件中初始化以下配置： ` module.exports = { mode: 'development }'`

development为开发环境下，生产环境下使用production

在package.json文件scripts节点下加入如下："scripts": { "dev": "webpack" },运行npm run dev命令，即可启动webpack进行打包，打包之后会在根目录中生成./dist目录webpack4.x以上 版本中默认约定： 打包入口文件为src->index.js 输出文件为 dist->main.js修改默认入口和输出 const path = require('path') module.exports = { mode: 'development'， entry: path.join(__dirname, './src/index.js'), output:{ path: path.join(__dirname, './dist'), //输出文件的存放路径 filename: 'bundle.js' // 名称 } } 再执行npm run dev即可输出。以上配置，每次修改代码之后，需要重新执行npm run dev才能使代码生效，为了避免这一问题，可使用自动打包功能

自动打包

需要安装webpack-dev-server，执行npm i webpack-dev-server -D然后将上述的 "dev": "webpack"改成"dev": "webpack-dev-server" 执行 npm run dev

根目录会生成一个隐藏的bundle.js文件，存在于内存中，但是外观上看不到

webpack常用参数

在package.json中配置

--open 打包之后自动打开浏览器 --host 配置ip地址 --post 配置端口

例如：

"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8838"