webpack 4

一、前期准备

开发IDE ：phpstorm

环境安装：nodejs npm

新建目录

D:\cmf\zlhcec.com>mkdir newpage

目录结构在已有的框架下新建

二、开发步骤

1）进入目录初始化

D:\cmf\zlhcec.com>cd newpage

D:\cmf\zlhcec.com\newpage>npm init -y
Wrote to D:\cmf\zlhcec.com\newpage\package.json:

{
"name": "newpage",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

2）安装webpack

全局安装多个项目可能因为webpack版本问题冲突有意外错误

D:\cmf\zlhcec.com\newpage>npm install -g webpack

安装webpack cli

D:\cmf\zlhcec.com\newpage>npm install -g webpack-cli

全局安装webpack-cli

3）执行webpack 打包

D:\cmf\zlhcec.com\newpage>webpack

生成dist目录下的main.js

webpack 打包的时候需要--mode=指定是production 还是development

看下图压缩还是挺多的

D:\cmf\zlhcec.com\newpage>webpack --mode=development

D:\cmf\zlhcec.com\newpage>webpack --mode=production

自定义配置文件打包

新建配置文件 config/webpack.dev.js

配置文件内容参考

const path = require('path')
module.exports = {

    mode:'development',
    /*入口文件配置项*/
    entry:{

        main:'./src/main.js'
    },
    output:{
        /*打包路径*/
        path:path.resolve(__dirname,'../dist'),
        /*打包名称*/
        filename:'bundle.js'
    },
    /*模块*/
    module:{


    },
    /*插件*/
    plugins:[

    ],
    /*配置webpack开发服务功能*/
    devServer:{

    }



}