webpack配置

最新推荐文章于 2024-07-10 17:59:25 发布

。。媛。。

最新推荐文章于 2024-07-10 17:59:25 发布

阅读量57

点赞数

本文链接：https://blog.csdn.net/caoyuan258/article/details/110817996

版权

webpack4.x

1.什么是webpack？

打包工具（静态资源管理工具）
前端必备技能（使用webpack）

2.webpack的作用？

1.打包：解决js依赖关系，合并成一个js（复杂js依赖关系）
2.转换：sass，less预编译的处理css，webpack可以帮你解决,(es6转换浏览器识别的js)
3.压缩：图片压缩，css压缩，js压缩

3.webpack四大核心

1.entry: 入口文件
2.output: 出口文件
3.plugin: 插件
4.loader: 转换器
5.dev-server: 本地服务器
6.mode: 模式

手动搭建一个脚手架

下载 webpack: cnpm install webpack -g
2. 下载 webpack-cli: cnpm install webpack-cli -g
3. 创建一个文件夹，终端运行初始化 npm init
4. 创建src主要编辑文件夹，创建一个main.js(入口文件)

      let app = document.querySelector("#app")  // 获取
>         app.innerHTML = "hello webpack110110110"
>         app.style.color = "red"

创建一个dist文件夹，创建一个index.html
（index.html，里面写一个div，div给个id属性，值为app）
打包 webpack src/main.js --output dist/bundle.js
(就会在dist文件夹中生成一个bundle.js)
设置默认配置文件 webpack.config.js

      let path = require("path")  // 地址
>         module.exports = {
>             // 入口
>             entry:{
>                 filename:"./src/main.js"
>             },
>             // 出口文件
>             output:{
>                 filename:"bundle.js",
>                 path:path.resolve(__dirname,"dist")
>             }
>         }

8. webpack  命令打包


9. 配置本地服务器: cnpm install webpack-dev-server -D   
10. 找到package.json文件，scripts中 加下面代码
   "dev": "webpack-dev-server --open --port 8088 --contentbase src --hot"
    --open  自动打开浏览器
    --port  设置端口号
    --contentbase 运行的资源文件目录
    --hot 热加载
11. 需要再次下载当前脚手架中所需要的webpack  webpack-cli
    cnpm install webpack webpack-cli -D
12. 和src，dist 同级创建一个index.html,内容的话，与dist文件里面的index.html一样
13. 执行npm run dev 运行起来的脚手架
14. 使用插件：
    下载插件 cnpm install html-webpack-plugin -S

15. 在webpack.config.js  中的代码


    let path = require("path")  // 地址
>         let htmlWebpackPlugin = require("html-webpack-plugin")
>         module.exports = {
>             // 入口
>             entry:{
>                 filename:"./src/main.js"
>             },
>             // 出口文件
>             output:{
>                 filename:"bundle.js",
>                 path:path.resolve(__dirname,"dist")
>             },
>             plugins:[
>                 new htmlWebpackPlugin({
>                     filename:"index.html",
>                     template:path.join(__dirname,"index.html")
>                 }) 
>             ]
>         }