分类： Java
2020-05-12 17:08:41
什么是webpack，为什么要使用它？
webpack核心
1. entry:入口
2. output:出口
3. loader:资源转换器
4. plugin:插件
5. mode:模式
还有其他的打包压缩工具：
grunt：
gulp：
fis3(百度)：
webpack：
1、什么是Webpack
WebPack可以看做是资源构建，模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，less、img、scss、commonJs,ES6等），并将其打包为合适的格式提供浏览器使用。
2、WebPack和Grunt以及Gulp相比有什么特性
Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。
———下面就开始构建webpack———
1、创建一个项目文件夹
2、npm init -y 安装，有关node的必须要有package.join文件
3、利用npm install webpack webpack-cli -D或者npm install webpack webpack-cli --save-dev安装依赖
4、通过 ./node_modules/.bin/webpack -v 来检查是否安装成功
5、在package.json中的script中配置：
"scripts": {
"build":"webpack"
},
6、 在根目录下创建src文件夹，并创建index.js
7、在根目录下运行npm run build , 会构建出dist文件夹，和压缩的main.js文件
webpack4.x 默认是零配置，零配置就是不用配置入口出口输出的文件名，只要npm run build，会自动构建出来，放到dist目录，即main.js文件
webpack即默认的入口:src/index.js,默认出口:dist/main.js
手动配置将入口设置为:src/main.js,出口:dist/bundel.js
8、如果要手动配置，必须要创建webpack配置文件夹,来执行，webpack默认配置文件:webpack.config.js
const path = require('path')
const config = {
//项目的入口文件,也就是代码执行从这里开始的
entry: "./src/main.js",
//项目的输出目录
output: {
//获取到当前根目录，在拼接一个dist目录
path: path.resolve(__dirname, "dist"),
//输出的文件名
filename: "bundel.js"
module.exports = config
黄色警告如何解决:给webpack.config.js中的mode
指定线上上产环境produciton、开发环境development
设置mode为——>mode:“development”,
9、安装 npm i clean-webpack-plugin -D 可以自动清理垃圾的打包文件
在webpack.config.js中设置 const {CleanWebpackPlugin}=require(‘clean-webpack-plugin’)
plugins:[
//通过plugins实例化
new CleanWebpackPlugin()
10、基于webpack搭建一个本地环境
安装: npm i webpack-dev-server -D
在package.js中配置
"scripts": {
"build": "webpack",
"dev":"webpack-dev-server"
},
还可以在webpack.config.js中设置固定的端口号
devServer: {
//实现热更新
hot:true,
//设置指定端口号
port: 9999,
//最后出书的路径
contentBase: path.join(__dirname, 'dist')
11、如何实现自动构建注入文件
安装： npm install html-webpack-plugin -D
在webpack.config.js中配置
//自动注入
const HtmlwebpackPlugin =require('html-webpack-plugin')
plugins: [
//清理垃圾的打包文件
new CleanWebpackPlugin(),
new HtmlwebpackPlugin({
//可以指定文件当模板 让这个文件为入口 读取模板的入口文件
template:"./index.html",
//最会将index.html输出到dist文件夹中
filename:'index.html',
})
],
12、webpack默认只识别.js、.json文件，如何让webpack识别css、less、scss、sass、img文件
安装：
1、 npm install style-loader css-loader -D 识别css;
2、npm install less less-loader -D 识别less, 定义less是以@开头 例如：@border_a:#00f;
3、npm install sass-loader node-sass -D 识别scss,定义scss是以@开头,例如：@border_a:#00f
4、npm install url-loader -D 识别图片格式，
13、要想设置多入口，在webpack.config.js中配置
//项目的入口文件,也就是代码执行从这里开始的
entry:{
"index":"./src/main.js",
"home":"./src/home.js"
},
//项目的输出目录
output:{
//获取到当前文件的根目录 设置输出目录
path:path.resolve(__dirname,"dist"),
//输出的文件名
filename:"[name].js" //开启多入口的话这里要写"[name]_[hash:指定hash位数].js" ，
//hash只要文件一改，hash就会变，可以实时的更新后台传递数据 //chunk
},
