要实现wepack打包,首先安装一以下内容
npm install webpack -g
指定版本npm install [email protected] -g
npm install webpack-cli -g
npm install webpack-dev-server -g
打包步骤
1.首先创建3个文件夹 mkdir dist src config
2.git初始化文件夹,便于后期上传到github,git init
3.然后初始化生成package.json,使用cnpm init -y
在webpack4中可以实现简易打包
例子:
在src文件夹中创建index.js,dist文件夹中创建index.html,切入文件夹,可以使用cd .>index.js创建文件,在mac.linux使用touch index.js
使用code .使用vscode打开文件夹
webpack --mode=develpoment
webpack --mode=prodution
lkai
这就是webpack的简易打包方式,但是加载css需要webpack.dev.js这个文件,所以所还是得使用之前的打包方式config.dev.js配置文件控制
先看打包文件目录,将main.js打包,然后index.html引用这个打包文件
配置config.dev.js:
const path = require("path");
module.exports = {
//入口文件
entry: {
main: "./src/main.js"//路径是以webpack根目录
},
mode: "production",//配置生产环境或者开发环境
output: {
filename: "[name]-bundle.js",
path: path.resolve(__dirname, "../dist"),//使用绝对路径作为相对路径配置路径
// publicPath: "/"
},
devServer: {
contentBase: "dist"//用于配置刚进入服务器,就显示的页面
}
}
配置好后,开始打包
webpack --config=config/webpack.dev.js
webpack-dev-server --config=config/webpack.dev.js
这就将src/main.js打包成main-buddle.js,并且被index.html引用了,下面打包css,html请看博客主目录