前言

这篇文章是我在学习webpack的时候的一些笔记，然后进行了一些整理，这次只是前面一小部分，后面会持续更新，对于webpack可以说还有很多小猿们都不太了解，(ps:我也是只小猿)，但是很多面试的时候公司都会去要求求职者会一些webpack的基本配置和对项目的一些优化，这让我们不得不学，希望这份笔记能对刚学习webpack的童靴们有帮助

什么是webpack？webpack能做什么？

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。可以将项目中用到的多个模块打包成一个或多个包，webpack更多的应用还在项目优化的中体现

下面来初始化一个项目吧

首先新建一个目录文件夹，然后打开命令窗口使用npm init来创建一个package.json来记录下载的包，然后安装依赖包webpack和webapck-cli，我这里使用的是npm，使用yarn也是可以的

npm i webpack webpack-cli -D

运行命令成功后会生成一个package.json，先在里面加上一个打包指令，来运行打包，打包会默认寻找src目录下的index.js，

package.json下配置:

 "scripts": {
    "build":"webpack"
  },

所以我们先在目录下新建一个src文件夹并创建一个index.js，里面写点代码，

console.log('webpack打包');

来运行打包命令试一试吧

npm run build

执行之后会有这个提示，原因是没有指定mode导致的，后面会一步步配置，先忽略掉，如果你的目录下生成了一个dist文件夹，里面有一个main.js就说明打包成功了

entry和output

上面的打包出口入口都是默认的，入口默认是src下的index.js，出口默认是dist下的main.js，当然我们可以自定义出口入口了

entry：配置打包入口文件 output：配置打包出口文件，output是个对象，里有两个必填属性：path出口路径文件夹的名字，filename出口文件的名字

单入口单输出

创建一个webpack.config.js，配置如下:

const path = require('path');

module.exports = {
  entry: './src/main', //指定入口文件
  output: { // 指定出口
    path: path.resolve(__dirname, 'dist'), // 出口路径文件夹的名字
    filename: 'bundle.js', // 出口文件的名字
  },
};

再来运行打包命令看看吧

npm run build

打包后的文件生成如下，那么我们就成功配置了指定出口入口了

多入口单输出

当我们需要指定多个入口文件，单个出口文件的时候，可以通过数组的方式进行配置

entry: ['./src/main','./src/main2.js'],

这个时候在main.js里面写了一个say的函数并创建了一个main2.js也写了一个say函数调用，将他们一起打包，新建件夹public里面创建index.html进行引用，看看输出是否打包成功

main.js：

const say = () => console.log('main.js');
say()

main2.js：

const say = () => console.log('main2.js');
say()

运行打包命令

npm run build

运行后的正常输出

多入口多输出

当我们需要配置多入口的情况下，entry的值就以对象的形式来表示了(也可以为数组)，key对应的是chunkname，value对应的是指定入口文件路径

 entry: {
    main: './src/main.js', // 我们配置的chunkname
    main2: './src/main2.js'
  },

配置多输出的情况下，output配置就不能将filename写死，webpack提供了[name]占位符，可以自动将chunkname的值进行替换,详细解释可点击官方文档查看

 output: { // 指定出口
    path: path.resolve(__dirname, 'dist'), 
    filename: '[name].js', // 会被自动替换成配置的chunkname
  },

打包运行一下吧

npm run build

运行如果生成了对应的文件，就说明成功了

mode

The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

接下来解决之前留下的警告提示问题，原因是没有指定mode，在没有指定mode情况下，默认是production生产模式，可以利用process.env.NODE_ENV来判断用户处于哪个环境，然后改变mode的值进行区分打包，mode配置提供了三个值，详情可点击[官方文档]

(webpack.docschina.org/configurati…

development：开发模式，有利于我们开发调试，相对于生产模式体积要大
production ：生产模式，体积会很小，但不利于开发调试
none：不使用任何默认优化选项 mode配置：

const path = require('path');

module.exports = {
  entry: {
    main: './src/main.js',
    main2: './src/main2.js'
  }, 
  output: {
    path: path.resolve(__dirname, 'dist'), 
    filename: '[name].js', 
  },
  mode:'development' // 开发模式
};

插件

插件Plugins可以帮助我们更好的去打包，优化自己的项目，可以说是很香了

HtmlWebpackPlugin

之前我们打包后的js需要我们手动创建HTML来引入使用，现在它HtmlWebpackPlugin来了，简化了 HTML 文件的创建，我们直接运行项目之后就可以预览网页了，首先下载HtmlWebpackPlugin依赖包

npm i html-webpack-plugin -D

首先我在src下面创建了一个HTML文件，基于这个文件来打包，配置如下：

const path = require('path');
// 导入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 创建插件实例进行配置
const htmlPlugin = new HtmlWebpackPlugin({
  template: './src/index.html', // 指定要用到的模板
  filename: 'index.html' // 生成后的模板名称
})
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './src/main.js',
  },
  // 编译模式
  mode: 'development', // 开发模式
  plugins: [htmlPlugin] // Plugins是个数组，用到的插件需要放在Plugins数组里面
};

输出结果：

webpack-dev-server

在之前我们打包好了项目之后，再去更改文件，就需要重新进行打包查看效果，webpack-dev-server 可以支持我们项目自动打包，打包后再更改文件只需要刷新浏览器就可以查看最新代码，首先下载依赖包

npm i webpack-dev-server -D

package.json配置如下

"scripts": {
    "dev": "webpack-dev-server"
  },

运行npm run dev 之后访问本机地址就可以查看自动打包的效果

自动打包的相关配置

在配置自动打包之后可以实时的打包，但是还需要我们自己手动去访问，这时候有以下几个配置

--open ：打包完成后自动打开浏览器页面
--host ：配置IP地址
--port ：配置端口号

 "scripts": {
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
  },

手把手带你入门weback4.0(一)

前言