## webpack基礎 1.前端工程化 2.有哪些比較好的前端工程化工具 3.初識webpack 4.webpack實例 ### 什么是前端工程化？ > 前端工程化是使用軟件工程的技術和方法來進行前端項目的開發、維護和管理 前端工程化包含的內容 1.代碼規范 2.分支管理 3.模塊管理 4.開發環境 5.模擬測試 6.自動化構建 7.自動化部署 ~~~ 以前如何開發頁面? 》設計師設計效果圖 》設計師切圖一個頁面一個文件 》工程師寫代碼綁定數據 》工程師發布代碼上線 》工程師手動壓縮或者解析靜態資源優化代碼 ~~~ 前端工程化帶來的好處 1.提高生產效率 2.降低維護難度 前端工程化適合場景 1.中大型項目 2.多人寫作項目 ### 前端工程化常用的一些庫 Gulp Grunt Fis3 Webpack ### 初識webpack 1.安裝webpack 局部安裝 ~~~ npm install webpack --save-dev npm install webpack-cli --save-dev ~~~ 全局安裝 ~~~ npm install -g webpack npm install -g webpack-cli ~~~ 2.如何編譯 ~~~ webpack --config webpack.config.js ~~~ 3.配置文件示例 * 入口 ~~~ module.exports = { entry: './path/to/my/entry/file.js' }; ~~~ * 出口 ~~~ const path = require('path'); module.exports = { entry: './path/to/my/entry/file.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'my-first-webpack.bundle.js' } }; ~~~ * loader ~~~ const path = require('path'); const config = { output: { filename: 'my-first-webpack.bundle.js' }, module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] } }; module.exports = config; ~~~ * plugins ~~~ const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過 npm 安裝 const webpack = require('webpack'); // 用于訪問內置插件 const config = { module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] }, plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ] }; module.exports = config; ~~~ ### webpack 實例演示 演示內容： 1.文件合并壓縮 2.html引用替換 HtmlWebpackPlugin 3.js混淆代碼 uglifyjs-webpack-plugin 5.圖片壓縮 imagemin-webpack-plugin 6.開發測試環境 webpack-dev-server