## 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