2020-10-23

webpack 使用详情

1、下载安装
webpack： 是一款模块化打包工具，webpack是基于配置的，通过配置一些选项来让webpack执行打包任务。

cnpm i webpack -g
cnpm i webpack-cli -g   
npm i webpac -g
npm i webpack-cli -g

2、出口入口配置

webpack在打包的时候，依赖关系图，在打包的时候需要告知webpack两个概念：入口和出口

一般情况下，我们需要使用webpack.config.js进行配置

entry

配置项目打包的入口，值可以为单个的字符串执行某一个文件的地址，这个时候该文件就是入口文件，webpack会根据入口文件里各模块间的关系形成依赖关系图，然后根据依赖关系图进行打包

entry:'./src/app.js',
output:{
    path:path.join(__dirname,'build'),
    filename:'app.js'
}

但是有的时候我们需要的是多入口，我们就写成数组的形式，数组里的每一个字符串地址指向的都是一个独立的入口，webpack会将这些入口的依赖打包

entry:['./src/app.js','./src/vendor.js'],
output:{
    path:path.join(__dirname,'build'),
    filename:'[name].js'//不确定名字的时候，这里会打包成main.js
}

刚才的两种entry配置都只会打包出一个js文件，但是在某一个应用中我们可能需要将js根据依赖关系打包成多个js文件，并且在多页面应用中，我们也确实不可能只使用一个js文件，那么我们就可以使用如下的配置：

entry:{
        app:'./src/app.js',
        vendor:'./src/vendor.js'
    },
    output:{
        path:path.join(__dirname,'build'),
        filename:'[name]_[hash].js'
    }

这样，因为filename里写成名字是[name],所以会根据entry的配置的键名来为打包出的js文件命名，hash是每次打包的一个随机的hash值，可以用来做版本控制

output

在这里我们配置打包输出的一些选项

filename可以确定打包出来的文件的名字，在里面我们可以使用[name],[hash]这样的占位符

path配置打包出去的文件的路径，需要是绝对路径

注意：

打包的时候出现黄色警告，原因是因为需要webpack指明mode模式。

package.json文件：

"scripts": {
    "build":"webpack --mode production --config scripts/webpack.config.js", //生产者环境
    "start":"webpack-dev-server --mode development --config scripts/webpack.config.js"  //开发者环境
  },
  【注意：需要安装一下webpack-dev-server】
  通过npm i webpack-dev-server -D 或者  yarn add webpack-dev-server -D

mode : production or development
前者是在生产环境下压缩文件，后者是在开发环境下不压缩文件。

但是把webpack.config.js的文件放在根目录下是不可以在更改它的名字了，后续把webpack的配置文件放入 /scripts/webpack.config.js,后续打包会报错。所以需要指明咱们的–config ，这样以后想改名字，就可以改了。

output:{
        //__dirname是指被执行js文件所在的文件夹目录
        // path: path.resolve(__dirname, '../dist'),
        
        //process.cwd()是指当前node命 令执行时所在的文件夹目录
        path:path.resolve(process.cwd(),"dist"),
        filename: '[name].[chunkhash:8].js'
    }

3、html-webpack-plugin （模板整合）

下载插件
npm i --save-dev html-webpack-plugin
yarn add --dev html-webpack-plugin

这个插件可以选择是否依据模板来生成一个打包好的html文件，在里面可以配置、title、template、filename、minify等选项，详情请查阅文档
安装好了在webpack.config.js里边引入。

const HtmlWebpackPlugin = require('html-webpack-plugin')

引入之后

module.exports = {
	entry:'index.js',
	output: {
		path: __dirname + '/dist',
		filename: 'index_bundle.js'
	},
	plugins: [
	//在webpack中。使用插件，直接new实例化一下即可，
	//打包回按照指定的模板生成html文件，并且内部会自动引入打包后的文件。
		new HtmlWebpackPlugin({
		    template: "public/index.html", //打包的模板
		     //如果public文件夹是在src下的话，直接执行可能会报错，可以把 public的文件夹，拖到根目录下就可以了。
		    title: "react-app",  //就是知道可以给index.html文件传入的标题
		    filename: "index.html"
		})
	]
}

中如果title我们不想写死的话，可以再public文件夹的index.html中把title里的内容设置标图片这样。

【如上述步骤都安装完成，还是报以下错误的情况下】:

那么可以尝试吧webpack-cli脚手架的版本换成低一点的，例如：

"webpack":"4.43.0",
"webpack-cli":"^4.1.0" //这时就可以考虑把版本换成3开头的版本了。
......
"webpack=dev-server":"^3.11.0"

运行成功时：

就会执行到这里。
【如果是在生产环境下打包的，会生成dist文件夹，如果是在开发环境下打包的，不会生成dist文件夹。】