基本介绍

1.  Package.JSON文件关键字说明

/** * Package.JSON文件说明 * @param name  项目名 * @param version 版本号 * @param main 加载的入口文件，require('moduleName')就会加载这个文件，默认值：index.js * @param scripts 运行脚本命令的npm命令行缩写,比如指定start:'webpack-dev-server',运行时使用 npm run start * @param author  作者 * @param license 使用权利 * @param dependencies 指定项目运行所依赖的模块 * @param devDependencies 项目开发所需要的模块如果你使用了一些构建工具,打包时，是不会把dev库打进去的。 * @param keywords npm包的关键字，keywords是一个字符串的数组 * */

2.npm命令说明

/** * NPM命令说明： * npm install 模块名 # 安装模块到项目目录下 * npm install -g 模块名 # -g 的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置。 * npm install -save 生产依赖：存在于package.json的dependencies中。比如我们的js使用了jquery，jquery的程序要在浏览器端起作用，也就是说我们最终的程序也需要这个包。 * npm install -save-dev 模块名 开发依赖：存在于package.json的devDependencies中。开发环境中需要的，上线并不需要这个包的依赖，简化代码或者生成兼容设置的依赖包。。 *  */

 

 

 

创建基本目录及文件

//创建文件夹mkdir webpack_demo//进入文件夹cd webpack_demo//本地化安装，生成 package.jsonnpm init//安装(webpack4需要同时安装webpack-cli)3版本).npm install -g --save-dev webpack4版本).npm install -g --save-dev webpack webpack-cli//根目录下创建入口文件夹mkdir src//根目录下创建出口文件夹mkdir dist//根目录下新建配置文件webpack.config.jsmodule.exports={    //入口文件配置项    entry:{},    //出口文件配置项    output:{},    //模块：例如解读CSS,图片转换，压缩    module:{},    //插件，用于生产模版和各项功能    plugins:[],    //配置webpack开发服务功能    devServer:{}}//在sr目录下创建入口文件entry.js

 

 

 

 

在webpack.config.js配置入口和出口文件

const path = require("path"); const publicPath = "http://127.0.0.1:8080"; module.exports = {    //配置入口文件    entry : {        a : './src/entry.js'    },    //配置出口文件    output : {        path        : path.resolve(__dirname,'dist'),    //配置出口文件目录        filename    : './js/[name].js',                    //指定出口文件路径及名称，[name]表示与入口文件名相同        publicPath  : publicPath        //给静态文件配置路径，便于静态资源找到正确路径    }}

 如果生产环境和开发环境的pulicPath不一样，而且我们需要来回切换，这时候我们可以使用更好的设置方法：

1) 在package.json中配置

{    "scripts": {        "dev": "set type=dev&webpack --mode=development",        "build": "set type=build&webpack --mode=production"    }}

2) 在webpack.config.js中配置

if(process.env.type == "dev"){    //切换到开发环境使用npm命令：npm run dev    const publicPath = "http://127.0.0.1:8080";}else {    //默认环境，切换到生产环境使用npm命令：npm run build     const publicPath = "http://127.0.0.1:8081";}

执行命令：npm run dev 和 npm run build 即可在开发环境和生产环境之间来回切换

 

 

 

热更新（与浏览器同步出口文件）

//安装依赖npm install -g --save-dev webpack-dev-server//在webpack.config.js配置//如果不配置，地址将指向127.0.0.1：8080，以根目录为服务器目录const path = require("path");module.exports = {　　devServer:{　　　　contentBase : path.resolve(__dirname,'dist'),　　　　host : '127.0.0.1',　　　　compress : true,　　　　port : 8081　　}}//node命令：打开浏览器并指向地址 127.0.0.1：8081webpack-dev-server --open

 

热加载（入口文件与出口文件同步）

module.exports = {    watchOptions:{        //检测修改的时间，以毫秒为单位        poll:1000,         //防止重复保存而发生重复编译错误。这里设置的500是半秒内重复保存，不进行打包操作        aggregateTimeout:500,         //不监听的目录        ignored:/node_modules/,     }}

运行node命令即可实现热加载：webpack --watch 

 

 热加载HTML文件

const webpack = require('webpack');module.exports = {    plugins:[        new webpack.HotModuleReplacementPlugin();    ]}

注:4.x版本后取消 new webpack.HotModuleReplacementPlugin()，也可实现实时更新