【vue】webpack的使用

一、npm

node环境–>>npm–>>webpack–>>cli

npm install就有了package.json和node_module文件夹（npm得以运行的条件）
package.json记录了需要安装的依赖（如果package.json记录了一些依赖，那么就直接npm install就行）
npm install webpack webpack cli -D就有了module和package.lock.json
就可以局部webpack了，有三种方法
一种是./module/bin/webpack
一种是npx webpack
一种是配置指令build=‘webpack’
之后npm run build，就会默认从src/index.js开始打包
如果想自己定义入口出口：
方式一：npx webpack --entry ./src/main.js --output-path ./build
方式二：npm run build (其中要在package.json里写指令时，build=‘webpack --entry
./src/main.js --output-path ./build’ 这样难以维护
为了解决5难以维护的问题，于是在项目里出现了 webpack.config.js 代码如下

    const path=require('path')
     module.exports={ 
        entry:'./src/main.js',
        output:{   
            path:path.resolve(__dirname,'./build')  
            filename:'bundle.js'  
        } 
   }

二、webpack使用

webpack不认识.css,不处理会报错，于是需要手写css-loader，但是webpack有很强大的社区，直接调用社区里的cssloader即可，不用手写

第一步：npm install css-laoder -D
第二步：指定css使用哪个loader
方式一：内联方式：在加载css时候，写上import “css-loader!../css/style.css”;
方式二：CLI方式(webpack5不再使用):
方式三(推荐)：配置方式:代码如下

webpack.config.js
代码如下 const path=require('path')
module.exports={
entry:'./src/main.js',
output:{
  path:path.resolve(__dirname,'./build')
  filename:'bundle.js'
  },
 module:{
  rules:[
  {
    test:/\.css$/ 正则表达式
    //三种形式：
    loader:"css-loader"   //下边use的语法糖
   use:[
   {loader:"css-loader",options:{}}
  "css-loader"
   ]
 }
}

这样css仍然不会生效，需要导入style-loader，作用:在html中生成

const path=require('path')
module.exports={
entry:'./src/main.js',
output:{
  path:path.resolve(__dirname,'./build')
  filename:'bundle.js'
  },
 module:{
  rules:[
  {
    test:/\.css$/ 正则表达式
   use:[
   //先执行css-loader，在执行style-loader
   "style-loader"，
   "css-loader"
   ]
 }
}

三、常见loader

3.1 postCSS-loader

postCSS-loader通过辨识浏览器(火狐啊，谷歌等)，改变css值的工具
用法：
npm install postcss-loader-D
在css文件中写上

`user-selection:none`

在webpack.js中写上

use:[
 {loader:"css-loader",options:{}}
 {loader:"post-loader",
 options:{
    postcssOptions:{
     plugins:[
        require("autoprefixer")
       ]
     }
   }
 }
]

3.2 file-loader

情景：使用图片两种方式：
在js中create一个div，然后设置这个div的class,然后在css中，导入图片，这样是可以的

还有一种是在js中create一个img标签，然后设置这个img.src,直接这样用是不行的，不会打包这个图片的，因为html会把img.src后边的字符串放到index.html中，但是路径对于js来说和index.html是不同的，所以不会生效。
解决方法：把图片当成一个模块，在js中，最上边import nhltImg from …/img/nhlt.png
下边imgEl.src=nhltImg;

更改图片的打包规则：
webpack.config.js
代码如下

const path=require('path')
module.exports={
entry:'./src/main.js',
output:{
  path:path.resolve(__dirname,'./build')
  filename:'bundle.js'
  },
 module:{
  rules:[
  {
    test:/\.css$/ 正则表达式
   use:[
   {loader:"css-loader",options:{}}
   {loader:"file-loader",options:{
      outputpath:"img",
      name:"[name]_[hash:6].[ext]"
    }}
   ]
 }
}

3.3 uri-loader

file-loader有一个坏处，就是静态服务器有bundle.js,图片一，图片二，index.html
会请求4次，很浪费

把小的图片base64编码成uri,嵌入到bundle.js里，
使用：把fileloader改成uriloader既可
{loader:“url-loader”,options:{
outputpath:“img”,
name:“[name]_[hash:6].[ext]”
limit:100*1024(byte)
}}

3.4 asset module type

上边使用file-loader或者uri-loader都是webpack5之前的事了，但是从webpack5之后，可以直接使用资源模块类型(asset module type),来代替loader

 {
    test:/\.(jpe?g|png|gif|svg)$/ ,正则表达式
    loader:"css-loader"   
   type:"asset",这样写会自动选择uri file
   generator:{
       filename:"img/[name]_[hash:6][ext]"
   },
   parser:{
     dataUrlCondition:{
     maxsize:100*1024
     }
   }
      name:"[name]_[hash:6].[ext]"
 
 }

四、插件

情景：
每次build时，都需要把dist文件给删了
太麻烦了，怎么办呢？
插件!
webpack中loader是转换模块的，而插件是帮助我们完成其他的一些任务的

4.1 cleanWebpackPlugin插件

cleanwepackplugin插件：
npm install clean-webpack-plugin -D

//loader是use中手写上就行
//而plugin是在webpack.config.js最上边写上
const { CleanWebpackPlugin } = require("clean-webpack-plugin");//从webpack生态里导进一个类来，
然后在modules{xxx}
下边写个plugins:[
	一个个插件对象
	比如new CleanWebpackPlugin()
]

4.2 htmlWebpackPlugin插件

htmlWebpackPlugin
打包html使用的插件
先安装npm install

const  HtmlWebpackPlugin  = require("html-webpack-plugin");
new HtmlWebpackPlugin({
  template:"./               //这里配置index.html的路径，一般都事先配置了一些规范，打包时按	照规范来打包出新的index.html
})

4.3 CopyWebpackPlugin插件

CopyWebpackPlugin
把favicon.icon这些静态文件复制到dist里用的插件

五、其他配置

情景：在xiaoming.js中写了一句错误代码，导致项目运行时报错，在控制台排查时，提示bundle.js（打包后的js）第一行错误，于是打开bundle.js，发现代码只有一行(被压缩了)，所以没法排查，于是这样配置：
mode的配置非常重要，不同的mode很多内部的配置是不同的，一般准备上线时改成“production”
devtool:“sourcr-map”
这样配置后，如果项目运行时出现了错误，直接去xiaoming.js中查找错误即可
(bundle.js旁边会多一个bundle.js.map,这个不用管他)

module.exports={
//设置模式，准备上线时改成production
//模式很重要，省下配置很多东西
mode:"development"
//设置js映射文件方便调试错误
devtool:"sourcr-map"
entry:'./src/main.js',
output:{
  path:path.resolve(__dirname,'./build')
  filename:'bundle.js'
  },
 module:{
  rules:[
  {
    test:/\.css$/ 正则表达式
    loader:"css-loader"   下边use的语法糖
   use:[
   {loader:"css-loader",options:{}}
   {loader:"file-loader",options:{
      outputpath:"img",
      name:"[name]_[hash:6].[ext]"
    }}
   ]
 }
}