环境搭建

初始化

//生成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