关于webpack你必须知道的内容

webpack

按照目标文件的引用关系。对文件进行合并并打包
###webpack的使用
vue/cli vue脚手架工具，基于webpack，是webpack的二次开发。
create-react-app react脚手架工具，基于webpack，是webpack的二次开发
某些公司里：用自己的webpack搭建脚手架工具

目标

1.了解webpack核心，与基础使用
2.自己搭建一套react或vue脚手架

基本使用

下载安装

npm install webpack -g 全局安装不推荐：因为

npm install webpack --save-dev
在package.json写运行指令
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“dev”:“webpack --mode=development”,//开发者模式，不会进行代码压缩；mode必须写，否则有告警
//“dev”:“webpack --mode=production”//线上模式，代码会进行压缩
“dev_dir”:“webpack --mode=production ./demo2/src/hehe.js -o ./demos2/output/main.js”//指定入口和出口路径
///webpack 模式 入口路径 -o 出口路径（压缩以后文件放置的地方）
},

当我们运行webpack指令的时候，默认入口文件是 ./src/index.js
默认的出口文件 ./dist/main.js

真正在项目重我们不这么做，而是在配置文件中配置

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack"
  },
运行：npm run  dev(指令)

配置文件 webpack.config.js

webpack的配置文件
默认该文件要求和pack.json同级，当你运行webpack指令的时候，默认会在运行路径里找当前文件；

加载器

帮住我们识别非正规常模块
在js文件里引入图片
1.原生js
2.通过import,import通常只能用与模块,这里使用加载器来帮助import引入图片；
module: {
rules: [
{
test: /.(png|jpg|gif)KaTeX parse error: Expected 'EOF', got '}' at position 186: … ] }̲, //加载css…/i,
use:[
‘style-loader’,
‘css-loader’
] //识别是从后向前来读的，先转化为css，然后再转化为style样式，以便识别；
}
]
}
在js文件里引入css

插件，文档里有许多插件

帮助我们简化一些功能性操作,plugins:[插件1({插件理的配置项})，插件2]
1.npm install html-webpack-plugin --save-dev
在打包的时候，把public里的html移动到dist下边,并把script标签里的路径也进行改变,和main.js自动合并；
然后进行配置：
module:{
rules:{},
plugins:[
new HtmlWebpackPlugin({
title:’’,
filename:‘asset/admin.html’,//要导出的文件名和路径,运行以后会多出一个asset文件夹
template:’./demo6/public/index.html’//按照那个模板生成html
})
]
}