webpack2-最基本配置文件的使用

webpack2-最基本配置文件的使用

---

webpack 命令

最基本配置文件的使用
通过 webpack 命令打包
1.在根目录下创建webpack.config.js文件
2.编写webpack.config.js文件
const path = require(‘path’)

module.exports = {
entry: path.join(__dirname, ‘./src/js/myDemo.js’), // 被打包的文件
output: {
path: path.join(__dirname, ‘./dist’), // 打包后的文件夹路径
filename: “myDemo-bundle.js” // 打包后的文件名
},
mode: “development” // 开发模式
}
3.运行webpack命令

webpack 命令做了什么？

1. webpack 命令执行时，发现没有给它指定 输入和输出，就会在项目的根目录下查找 webpack.config.js 配置文件
2. 查找到 webpack.config.js 配置文件后，解析配置文件，拿到 输入输出配置对象
3. 进行打包

---

使用 webpack-dev-server 工具

1. webpack-dev-server有什么用？
   可以用来自动打包编译

2. 通用步骤
   npm init -y
   npm i webpack --save-dev
   npm i webpack-cli --save-dev
   npm i jquery -d

3. 安装 webpack-dev-server
   npm i webpack-dev-server --save-dev

4. 在 package.json 中的 scripts 中添加
   “dev”: “webpack-dev-server”

5. 编写js和html
   html中引入js的路径为 /xxx.js

6. 编写配置文件 webpack.config.js
   const path = require(“path”)
   module.exports = {
   entry: path.join(__dirname, ‘./src/js/demo.js’),
   output: {
   path: path.join(__dirname, ‘./dist’),
   filename: “demo.js”
   },
   mode: “development”
   }

7. 启动 webpack-dev-server
   npm run dev

8. 注意：webpack-dev-server打包编译后的文件在内存中

npm run dev