webpack4+学习笔记：3. webpack 手动配置打包之 webpack.config.js 与 webpack-dev-server

webpack 手动配置打包之 webpack.config.js 与 webpack-dev-server

1. 在项目的根目录下新建文件 webpack.config.js 文件

2. webpack.config.js 配置有以下几种类型
（1）单页面入口
① index.js 入口页面

console.log("Wellcome to webpack4+");

② webpack.config.js 配置

let path = require("path");
module.exports = {
	entry : "./src/index.js",   //单页面入口
	output: {       //出口
		filename: "bundle.js",
		path: path.resolve("./dist")    //绝对路径
	},
	devServer: {    //开发服务器
      
	},
	module: {       //模块的配置

	},
	plugins: [      //插件的配置

	],
	mode   : "development",     //更改模式 --开发    
	resolve: {      //配置解析
        
	}
 }

③ 终端运行

npx webpack

如上，命令窗口中已显示打包好，入口页面即为 dist 文件夹下的 bundle.js 文件。

（2）多页面入口——单页 index.html 引用多个 js 文件
① 在 src 的 js 文件夹下新建 a.js 文件，也为入口页面

a.js 文件

module.exports = "我是第二个入口页面"

index.js 文件

console.log("Wellcome to webpack4+");

② webpack.config.js 配置

let path = require("path");

module.exports = {
    entry : ["./src/index.js", "./src/js/a.js"],		//多入口
    output: {
        filename: "bundel.js",
        path    : path.resolve("./dist")
    },
    devServer: {

    },
    module: {

    },
    plugins: [

    ],
    mode   : "development",
    resolve: {
        
    }
}

③ 终端运行

npx webpack

可以看到，webpack 已经把两个入口页面 index.js 和 a.js 都打包在了 dist 文件夹下的 bundle.js 文件中

3. 安装 webpack-dev-server 工具
（1）安装

//终端输入
npm install webpack-dev-server -D

如下 package.json 中表示安装成功：

（2）package.json 中配置

打包的时候执行命令：

npm run build

运行项目的时候执行命令：

npm run dev

（3）webpack.config.js 中 开发服务器配置

devServer: {
    contentBase: "./dist",           //指定打开的页面
    open: true,               		 //自动打开浏览器
    host: "192.168.88.103",     	 //设置ip，不设默认 localhost
    port: 8081,               		 //设置端口号
    compress: true,                  //启动服务器压缩
},

下一节我们学习 html-webpack-plugin 插件~~~
将 html 打包到 dist 下可以产生自动引入生产的js~~~