新建一个文件webpackDemo,在终端打开这个文件夹
1.初始化文件夹
npm init
这时候package.json文件出现了,我们输入下列命令安装依赖node-modules
2.全局安装
cnpm install webpack -g
cnpm install --save-dev webpack(本地安装)
如果不全局安装,只是安装到本地,可能会输入webpack
的时候不是内部或外部命令
3.安装webpack脚手架
webpack4必须安装
如果不全局安装可能会一直让安装脚手架;这个可能时环境变量配置原因
cnpm i webpack-cli -g 全局
cnpm i webpack-cli -D
这时候在webpackDemo根目录新建一个js文件,可以在js问价输入一些内容给,就可以打包了,在更目录会生成一个dist
文件,下面会出现index.min.js
这个文件便是打包后的代码。
当然这是最最基础的一个打包,往往我们在使用webpack的时候需要配置许多自己的需要的东西,那么干或就从第4步开始
4.在根目录新建public文件夹将js文件引入
新建webpack.config.js文件,看代码
//*webpack.config.js*
const path=require("path");
module.exports={
//单入口
entry:"./public/index.js",//入口地址
output:{
path:path.resolve(__dirname,"build"),//出口地址
filename:"bundle.js"//打包后文件夹名称
},
更改package.json配置
"scripts": {
"dev": "webpack --mode developmenta",
"build": "webpack--mode developmenta",
},
webpack
是启动打包
--mode developmenta开
发环境
--mode developmenta
生产环境
这样配置好之后,在终端输入npm run dev
便可以进行开发调试打包npm run build
便可以进行生产打包
5.配置webpack-dev-server
webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。
webpack-dev-server 主要提供两个功能:
(1)为静态文件提供服务
(2)自动刷新和热替换(HMR)
5.1安装webpack-dev-server
cnpm install --save-dev webpack-dev-server
5.2配置webpack.config.js文件,代码
const path=require("path");
module.exports={
//单入口
entry:"./public/index.js",//入口地址
output:{
path:path.resolve(__dirname,"build"),//出口地址
filename:"bundle.js"//打包后文件夹名称
},
devServer: {
contentBase: "./build", //本地服务器所需加载文件的目录
host: 'localhost', //服务器IP地址
port: "1234", //本地服务端口号
open: true, //自动打开
inline: true, //文件修改收实时刷新(热更新)
historyApiFallback: true, //不跳转
// hot: true //配置热更新插件需要配置这个参数为true
},
}
5.3配置package.json
"scripts": {
"dev": "webpack --mode developmenta",
"build": "webpack --mode production",
"serve": "webpack-dev-server"
},
先打包,再输入npm run serve便可以在网页启动一个本地服务浏览
未完待续