初始化
//生成package.json配置文件
npm init
安装webpack插件
npm install webpack webpack-cli webpack-dev-server -D
添加编译命令
{
"name": "webpack4-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack src/index.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
}
}
配置webpack.config.js
const path = require('path');//处理路径信息
const config = {
mode:'development', // development || production
entry:path.resolve(__dirname,'../src/index.js'),//webpack 打包入口文件
output:{
path:path.resolve(__dirname,'../src/dist'),//打包完成放置位置
filename:'main.js'//打包后的文件名
},
module:{//例如如何解读css,图片如何转换，压缩等
rules:[{
test:'/\.js$/', //匹配所有的js文件
exclude:/node_modules/,//除了node_modules以外
}]
},
//插件，用于生产模板和各项功能
plugins:[],
//配置webpack开发服务器功能
devServer:{}
}
module.exports = config
