webpack的基本使用

一.什么是webpack

概念： webpack是前端项目工程化的具体解决方案。

主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆，处理浏览器端JavaScript的兼容性性能优化等强大的功能。

好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。

注意：目前Vue，React等前端项目，基本上都是基于webpack进行工程化开发的。

二.webpack的安装

1. 运行cmd      npx webpack 

2. 配置  webpack.config.js  文件

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

3. 配置package.json

"scripts":{
    "serve":"webpack"
}

4. 插件包含处理文件，比如压缩，清理等

vue插件
vue-loader
js优化
terser-webpack-plugin
css优化
css-minimizer-webpack-plugin
抽出插件
mini-css-extract-plugin
处理html模板工具
html-webpack-plugin
清理插件
clean-webpack-plugin
使用插件
  plugins: [

]

5. 命名

1.[hash:7] 哈希值
    哈希命令有效控制缓存与更新
hash
contentHash 和内容相关
chunkHash 和入口相关
2.[name]当前文件名
3.[ext] 后缀名

6. 本地服务器    webpack-dev-server

proxy 代理
hot 热更新
host 域名
port端口号
open 自动打开浏览器
package.json  
scripts:{"serve":"webpack serve"}

7.按需下载

import("jquery").then(({default:$})=>{})

8.按需下载    

import("jquery").then(({default:$})=>{})

9.webpack魔法注释

/* webpackChunkName:"jquery", webpackPrefetch: true */

加载的文件名，预加载（有网络空闲提前加载）

10.devtool开发工具

当代码出错如何报错 eval

11.别名

resolve:{

alias:{

"@":path.resolve(__dirname,"src")

}

}

12.把css抽出单独文件    npm   i  min-css-extract-plugin

13.把css优化+压缩      optimize-css-assets-webpack-plugin

14.不用vue脚手架创建一个vue项目

处理.vue
 vue-loader
编译template
vue-template-compiler
热更新
vue-hot-reload-api
vue-style-loader 
处理样式
vue 
{test:/\.vue/ ,use:["vue-loader"]}
const {VueLoaderPlugin} from  'vue-loader'
plugins:[new VueLoaderPlugin()]

15.处理scss         npm i sass sass-loader -D

{test:/\.scss/ ,use:["style-loader","css-loader","sass-loader"]}

16. devServer节点

在webpack.config.js配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多配置。其中有一些属性设置可以更方便我们进行开发。

  devServer: {
        open: true, //打包完成后默认打开浏览器
        port: 8080,//修改端口号
        host: '127.0.0.1' //修改主机地址
    }