webpack笔记（1） 基本配置

基本介绍

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.json
npm init

//安装(webpack4需要同时安装webpack-cli)
3版本).npm install -g --save-dev webpack
4版本).npm install -g --save-dev webpack webpack-cli



//根目录下创建入口文件夹
mkdir src

//根目录下创建出口文件夹
mkdir dist

//根目录下新建配置文件
webpack.config.js
module.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：8081
webpack-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()，也可实现实时更新