webpack图解-学习笔记-蒲公英云

webpack图解-学习笔记

文章目录

- webpack图解-学习笔记
- webpack与vuecli关系
- 为什么要打包？
- 什么是webpack?
- webpack-dev-server
- 手动配置文件
- 把打包后的js文件整合到html中
- 项目发布

webpack图解-学习笔记

webpack与vuecli关系

vuecli基于webpack建构的，有一些配置还需要直接使用webpack的配置项
要完全掌握vuecli，必须掌握webpack
vuecli的配置项较少，若要使用webpack的配置项，则要用configureWebpack
vuecli启动项目，实际上启动的是webpack-dev-server

为什么要打包？

项目分2种：企业级项目，互联网项目
企业级项目：jsp, asp, (写好页面，引入js,css,img)完了直接部署
互联网项目：尽量减少加载时间，提高用户体验，需要打包
打包：文件压缩(注释，代码压成一行)

什么是webpack?

打包工具还有gulp grant
从项目入口文件开始，装载转换所有文件，优化处理文件，生成最终发布文件
重要概念：入口(main.js)，出口(dist)，装载器loader，plugin.
生成package.json npm init -y
cnpm i -S webpack webpack-cli(可通过命令行操作)
零配置：没有webpack.config.js依然可以打包
webpack4可以使用零配置不用配置文件webpack.config.js
若指定了webpack.config.js文件，就不会再使用零配置
npx: 可以直接运行node_modules中的包
npx webpack 或
package.json中加"dev": "webpack-dev-server"
然后直接npm run dev
webpack默认可以打包压缩项目，零配置

//package.json
{
“name”: “01”,
“version”: “1.0.0”,
“description”: “- vuecli基于webpack建构的，有一些配置还需要直接使用webpack的配置项\r - 要完全掌握vuecli，必须掌握webpack”,
“main”: “index.js”,
“scripts”: {
```
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server"
```
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“dependencies”: {
```
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
```
},
“devDependencies”: {
```
"html-webpack-plugin": "^4.3.0"
```
}
}

webpack-dev-server

把前端当作一个http容器访问前后分离标志
cnpm i -S webpack-dev-server
启动前端服务：npx webpack-dev-server
根目录

手动配置文件

webpack: webpack.config.js
vuecli: vue.config.js 官网链接：https://cli.vuejs.org/zh/

webpack.config.js文件

//自定义webpack
let path = require('path'); //path node
let HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {   //node模块化的写法
    entry: "./src/index.js",  //入口
    mode: 'development',  //开发 发布production
    output: {                  //出口
        filename: "index.js", //指定输出名字
        //node __dirname 当前目录
        path: path.resolve(__dirname, "dist")  //指定输出目录
    },
    devServer: {   //web服务配置
        port: 8081,
        open: true,  //服务启动时自动打开默认浏览器
        progress: true, //进度条
        contentBase: './dist'  //http容器的根目录
    },
    plugins: [
        new HtmlWebpackPlugin({ 
            template: './src/index.html', //模板
            filename: 'index.html',       //打包后模板名字
        })
    ]
}