1.新建一个文件夹
2.运行npm init -y
快速初始化项目(package.json)
3.在项目根目录创建src
源代码目录和dist
产品目录
4.在src目录下创建index.html
5.使用cnpm 安装webpack,运行cnpm i webpack-cli -D
6.建立如下目录
(在webpack4.x中,有一个特性,约定大于配置,即默认的打包入口路径是Index.js,打包的输出文件是 dist=>main.js
目的是尽量减少配置文件的体积)
(webpack4.x中新增了mode选项(必须要有):可选值为development(开发模式)和 production(压缩文件))
7.在命令行输入webpack
即可打包
webpack-dev-server
配置webpack-dev-server:
a. webpack-dev-server简介:
是一个小型node.js express服务器
新建一个开发服务器,可以serve我们pack以后的代码,并且当代码更新的时候自动刷新浏览器
启动webpack-dev-server后,你在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。
两种自动刷新方式:
iframe mode
在网页中嵌入了一个 iframe ,将我们自己的应用注入到这个 iframe 当中去,因此每 次你修改的文件后,都是这个 iframe 进行了 reload
命令行:webpack-dev-server,无需–inline
浏览器访问:http://localhost:8080/webpack-dev-server/index.html
inline mode
命令行:webpack-dev-server --inline
浏览器访问:http://localhost:8080
b. 安装webpack-dev-server
npm install webpack-dev-server --save-dev
可在项目根目录下安装(不加-g,在项目根目录出现node_modules文件夹,内含webpack-dev-server及其依赖包),也可全局安装(加-g 必须sudo)
c. 在webpack.config.js中添加配置
var webpack=require('webpack');
module.exports = {
……
devServer: {
historyApiFallback: true,
inline: true,//注意:不写hot: true,否则浏览器无法自动更新;也不要写colors:true,progress:true等,webpack2.x已不支持这些
},
plugins:[
new webpack.HotModuleReplacementPlugin()
]
};
d. 在package.json里配置运行的命令(npm支持自定义一些命令)
e. 运行server
npm start
Error: …(此处省略一堆错误)
解决:在本项目中安装webpack:(不加-g,在项目根目录出现node_modules文件 夹,内含webpack及其依赖包)
npm install webpack
浏览器打开http://localhost:8080/
成功运行,且修改app中的js代码,浏览器会自动刷新!成功!
注意点:
//--open 默认打开浏览器 --port 指定端口 --host 指定域名
"dev":"webpack-dev-server --open --port 3000 --inline --hot --host 127.0.0.1"、
8.配置html-webpack-plugin插件
(1)先运行npm install html-webpack-plugin -D
(2)再将其写入webpack.config.js文件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');//导入在内存中自动生成index页面的插件
const htmlPlugin = new HtmlWebpackPlugin({
template:path.join(__dirname,'./src/index.html'),//源文件
filename:'index.html'//生成的内存中首页的名称
})
module.exports = {
mode : 'development',
plugins:[
htmlPlugin
]
}