几种常见的打包工具
grunt:https://www.gruntjs.net/
gulp:https://www.gulpjs.com.cn/
fis3(百度):http://fis.baidu.com/
webpack:https://webpack.js.org/ 成功案例：vue脚手架，react脚手架,angular脚手架
- webpack是什么：是一种静态资源构建，打包的工具
-
会wepbakc的前置知识：会用node.js安装一个包( npm install xxxx --save-dev)
-
webpack核心
1 - entry:入口 2 - output:出口 3 - loader:资源转换器 4 - plugin:插件 5 - mode:模式
-
创建一个项目目录：webpack_vue
-
创建一个package.json文件
npm init -y
1 3. 安装webpack,webpack-cli 2 3 npm install webpack webpack-cli --save-dev 4 简写： 5 npm i webpack webpack-cli -D 6 7 检测是否安装成功： 8 9 ./node_modules/.bin/webpack -v 10 通过package.json中的scripts脚本来测试 11 http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html 12 13 4.在项目根目录下创建一个src，并建立一个index.js 14 15 5.在项目根目录下运行npm run build 16 17 会构建成一个dist目录，并生成一个main.js文件 18 19 wabpack4.x 默认是零配置： 20 21 即默认的入口：src/index.js 22 默认的出口：dist/main.js 23 24 手动配置： 25 26 入口：src/main.js 27 出口：dist/bundle.js 28 29 6.如果手动配置，必须要创建webpack配置文件，来执行 30 31 默认webpack配置文件：webpack.config.js 32 33 黄色警告如何解决：通过配置mode 34 如何自动清理打包的垃圾文件： 35 36 第一步： npm install --save-dev clean-webpack-plugin 37 38 第二步： 在webpack.config.js中引入 39 40 const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 41 42 第三步：通过plugins实例化 43 44 module.exports = { 45 ... 46 plugins: [ 47 new CleanWebpackPlugin(), 48 49 ...... 50 }; 51 52 基于webpack的服务器环境：webpack-dev-server; 53 54 npm install webpack-dev-server -D 55 56 通过devServer来配置:port,baseContent 57 58 devServer: { 59 port: 9999, 60 contentBase: path.join(__dirname, 'dist'), 61 } 62 63 如何实现自动构建构的文件自动注入index.html: 64 65 安装html-webpack-plugin 66 67 npm install html-webpack-plugin 68 69 引入： 70 71 const HtmlWebpackPlugin = require('html-webpack-plugin'); 72 73 添加到plugins中： 74 75 plugins: [ 76 。。。 77 new HtmlWebpackPlugin({ 78 template: './index.html', //读取模板的入口文件 79 filename:'index.html' //生成打包后的html文件 80 }), 81 ] 82 83 84 85 86 87 说明：webpack可以将node服务端的JS代码通过构建直接运行在浏览器上 88 89 webpack支持多种模块化规范：AMD,CMD,CommonJS,ES6 modules 90 91 webpack默认识别的文件：.js,.json文件格式 92 93 94 loader：让webpack识别其他类型的文件，例如：css,png,svg,less,sass..... 95 96 识别css:style-loader,css-loader