一、不使用webpack-dev-server时
1、在没有配置webpack.config.js 文件时,
需要使用webpack --mode development -o 被打包文件 目的文件(-o表示目的文件不存在,则创建)
2、当配置webpack.config.js时
const path = require('path')
module.exports = {
entry: path.join(__dirname, './src/main.js'),
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
mode: 'development'
},
直接输入webpack,就会打包
二、使用webpack-dev-server
1、cnpm i webpack-dev-server -D // -D时安装到本地
2、cnpm i -D webpack //webpack-dev-server 依赖于webpack ,所以需要先将webpack 安装到本地
3、cnpm i -D webpack-cli //第一个新版的坑,最新版的需要安装webpack-cli
4、在项目package.json文件中,增加
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --port 3000" //--open为可选项,自动打开浏览器,--port也是可选项,指定端口号
},
"dev"后的几个可选项
–open 默认打开浏览器
–port 8080,默认打开的端口号
– contentBase filepath ,默认打开的根路径
–hot 每次改变,浏览器无刷新重载(打补丁),不适用则每次都生产新文件
也可以在webpack.config.js文件这样写:
devServer: {
open: true,
port: 8080,
hot: true,
contentBase: 'src'
}
5、使用webpack-dev-server不会直接将文件打包到目的文件,而是在项目根目录下(存在于内存中,虚拟存在,在文件目录下看不见),所以想实时看的改变,引用时可以引用根目录下虚拟存在的bundle.js文件
前面的文件结构
package.json:
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.5.1"
},
"devDependencies": {
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
}
webpack.config.js:
const path = require('path')
module.exports = {
entry: path.join(__dirname, './src/main.js'),
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js',
},
mode: 'development',
devServer: {
open: true,
port: 8080,
hot: true,
contentBase: 'src'
}
}