webpack的基础知识点

一、更改入口与出口 在根目录下创建webpack.config.js 进行配置 1、更改入口文件： entry修改入口文件名，默认只是别src文件下的index.js，通过对象的方式可以同时写多个入口文件

entry:'./src/qf.js', //多个入口文件 entry:{ qf:"./src/qf.js", about:"./src/about.js" }

2、更改出口文件： output修改出文件名： path.jion第二个参数配置出口文件名 filename配置出口文件名，默认main.js name：可以同时写多个出口文件 hash：配置文件后缀以及个数 chunkhash：代表只有修改的配置文件重新打包

output:{ path:path.join(__dirname,'dist'), filename:"[name].[chunkhash:5].js" }

二、生产版本（build）与开发版本（start） 1、在package.json中添加

"scripts": { "start":"webpack --mode production" "start":"webpack --mode development" },

2、单独简历文件夹存放webpack.config.js并且可以更改文件名、当时dist也会在这个文件夹下显示解决方案

"scripts": { "build":"webpack --mode production --config scripts/webpack.config.js" },

解决： _dirname：在当前文件的目录 process.cwd()：在当前node.js进程的目录

output:{ // path:path.join(__dirname,'../dist'), path:path.join(process.cwd(),"dist"), filename:"[name].[chunkhash:5].js" }

三、html-webpack-plugin插件 打包会按照指定的模板生成html文件、并且内部会自动引入js文件 安装插件：yarn add --dev html-webpack-plugin 引入

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

添加配置项webpack.config.js中

plugins:[ new HtmlWebpackPlugin({ title:'react项目搭建', //创建项目名称需要在html中通过<%= htmlWebpackPlugin.options.title %>接受 template:'public/index.html' //使用哪个index.html模板作为生成的文件 }) ]