文章目錄

• • 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', //開發 發布productionoutput: { //出口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', //打包后模板名字})] }

把打包后的js文件整合到html中

• 手動添加<script src="./index.js"></script>
• html-webpack-plugin作用：將打包后的js自動添加到html

項目發布

• npm i -g serve
• serve dist

總結

以上是生活随笔為你收集整理的webpack图解-学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。