webpack

什么是前端模块化什么是webpack? 可以干嘛webpack全局安装：局部安装webpack:webpack的配置1，webpack - loader的使用1-1,使用webpack打包css文件 +less文件1-2,webpack处理图片1-3,webpack中ES6转ES5的babel 2，webpacl - plugin的使用2-1，什么是plugin2-2，plugin的使用2-2-1 webpacke中为打包文件添加版权声明2-2-2，webpack中用于打包html的plugin---HtmlWebpackPlugin2-2-3，webpack中用于打包js文件的plugin-ugilifyjs-webpack-plugin 3，loader和plugin的区别4,webpack搭建本地服务器5,webpack.config.js文件配置：[以上知识点的总结]补充：

什么是前端模块化

什么是webpack? 可以干嘛

webpack和grunt/gulp都可以用来打包静态资源，有什么区别？

webpacke除了对文件进行自动化打包，还提供模块化的编程方式。

webpack全局安装：

npm install webpack@3.6.0 -g 一旦项目中需要使用node，就可以进行一下npm初始化：npm init，会生成一个package.json文件–save-dev指的是开发时依赖。因为webpack的主要作用是打包，所以webpack属于开发时依赖。

---

局部安装webpack:

npm install webpack@3.6.0 --save-dev 通过node_modules/.bin/webpack启动webpack进行项目打包

在项目开发中，大多数浏览器都支持ES5, 对于es6【即es2015】可能不支持，所以在打包的时候，需要配置babel， 作用是将打包文件内的所有ES6语法转化成ES5语法

---

webpack的配置

1，webpack - loader的使用

1-1,使用webpack打包css文件 +less文件

需要npm intall --save-dev css-loader ，这个模块只负责加载，不负责解析style-loader才可以将导出的css模块添加到DOM。 npm install --save-dev style-loader less-loader用来处理less文件。 使用前需要 npm install --save-dev less-loader less webpack中，use多个loader时，从右向左读取 {//webpack打包css文件+less文件 test:/\.css$/, use:['style-loader','css-loader','less-loader'] },

1-2,webpack处理图片

处理图片需要依赖url-loader模块包

npm install url-loader --save-dev { test:/\.(png|jpg|jpeg|gif)$/, use:[{ loader:'url-loader', options:{//带参数的用法 limit:13000, //单位kb name: 'img/[name].[hash:8].[ext]' //使用[]会将name当成变量 // 希望自动打包的图片的命名方式有一定的规范，img/name.hash:8,而不是由file-loader自动命名为32位的hash } }] } 当加载的图片大小 < limit 时，会自动将图片编译成base64字符串形式当加载的图片 >limit 时，需要使用 file-loader 模块进行加载;所以webpack处理图片需要安装file-loader: npm install file-loader --save-dev 使用file-loader加载的图片会自动打包进dist文件夹。这样会导致图片路径错误。 解决思路：加载图片时自动加上dist路径 具体操作，给 output 添加 publicPath 属性 publicPath:'dist/' //只要涉及到url，都会自动拼接上dist/ 通过file-loader自动打包的图片会自动命名未32位的hash。而我们通常希望图片命名有一定的规范，且图片全部打包进一个img文件夹而非全部打包在dist文件夹下。img/name.hash:8.ext 具体操作可以这样： 在options内添加name属性 希望自动打包的图片的命名方式有一定的规范，img/name.hash:8,而不是由file-loader自动命名为32位的hash name: 'img/[name].[hash:8].[ext]' //使用[]会将name当成变量 使用 [ ] 会将name当成变量

1-3,webpack中ES6转ES5的babel

如果需要将ES6的语法转ES5，就需要使用babel

为什么要转ES5？？因为部分浏览器还不支持ES6webpack打包的js文件使用ES6语法，且没有转ES5。 所以在webpack中需要安装babel-loader npm install babel-loader@7 babel-core babel-preset-es2015 --save-dev

配置webpack.config.js

module.exports ={ module:{ rules:{ { test:/\.m?js$/,//匹配所有.js文件 exclude:/(node_modules|bower_components)/,//不包含node_modules或bower_components文件夹 use:{ loader:'babel-loader', options:{ presets:['es2015'] //es2015即ES6 } }, } } }

2，webpacl - plugin的使用

2-1，什么是plugin

plugin是插件，webpack中的插件，就是对webpack现有功能的扩展。比如打包优化，文件压缩等。

2-2，plugin的使用

2-2-1 webpacke中为打包文件添加版权声明

BannerPlugin是webpack自带的插件。所以只要导入webpack-----require('webpack')，就能使用。

2-2-2，webpack中用于打包html的plugin—HtmlWebpackPlugin

HtmlWebpackPlugin的作用：

自动生成一个index.html文件【可以指定模板来生成】将打包的js文件，自动通过script标签插入到body

安装：

npm install html-webpack-plugin --save-dev

使用插件： 在webpack.config.js文件中

这里的template表示根据什么模板来生成index.html另外，需要删除之前在output中添加的publicPath属性，否则插入的script标签中的src可能会有问题使用之前需要导入：const htmlWebpackPlugin = require('html-webpack-plugin')

2-2-3，webpack中用于打包js文件的plugin-ugilifyjs-webpack-plugin

1，使用1.1.1版本和cli2保持一致

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

2，导入

const uglifyJsPlugin = require('uglifyjs-webpack-plugin')

3，修改webpack.config.js文件。使用插件

---

3，loader和plugin的区别

---

4,webpack搭建本地服务器

webpack提供一个可选的本地开发服务器。可以让浏览器自动刷新显示我们修改后的结果。 使用之前需要先安装： 安装的版本和webpack版本需要有对应关系

npm install webpack-dev-server@2.9.1

---

5,webpack.config.js文件配置：[以上知识点的总结]

//webpack.config.js const path = require('path') //这样的写法，会全局去搜索path.js文件。//一般都没不是自己定义这个包，而是依赖node的包 只要通过npm init 命令就行 const webpack = require('webpack') const HtmlWebpackPlugin = require('html-webpack-plugin') const uglifyJsPlugin = require('uglifyjs-webpack-plugin') //require('./css/normla.css') //将css文件当成一个模块 module.exports = { entry:'',//入口 output:{//出口 path: path.resolve(__dirname,'dist'),//path必须是绝对路径 可以动态的获取路径，通过require导入node模块 //_dirname表示一个全局变量，和dist都属于node的内容。 //path.resolve(__dirname,'dist') 可以保证得到一个绝对路径 注意是双下划线哦 filename:'bundle.js', publicPath:'dist/' }, module:{ reules:{ {//webpack打包css文件+less文件 test:/\.css$/, use:['style-loader','css-loader','less-loader'] //需要npm intall --save-dev css-loader 这个插件只负责加载，不负责解析 //style-loader才可以将导出的css模块添加到DOM //less-loader用来处理less文件。 使用前需要npm install --save-dev less-loader less //use多个loader时，从右向左读取 }, {//webpack处理图片 test:/\.(png|jpg|jpeg|gif)$/, use:[{ loader:'url-loader', options:{//带参数的用法 limit:13000, //表示图片最大不13kb //当加载的图片<limit时，会自动将图片编译成base64字符串形式 //当加载的图片>limit时，需要使用file-loader模块进行加载 //所以webpack处理图片需要安装file-loader: npm install file-loader --save-dev //使用file-loader加载的图片会自动打包进dist文件夹。这样会导致图片路径错误。 //解决：加载图片时自动加上dist路径---给output添加publicPath属性 name: 'img/[name].[hash:8].[ext]' //使用[]会将name当成变量 //希望自动打包的图片的命名方式有一定的规范，img/name.hash:8,而不是由file-loader自动命名为32位的hash } }] }, {//webpack配置babel-loader test:/\.m?js$/, exclude:/(node_modules|bower_components)/, use:{ loader:'babel-loader', options:{ presets:['es2015'] //es2015即ES6 } } }, } }, resolve:{// extensions:['.js','.css','.vue'],//这行代码的作用：省略.js,.css,.vue文件的后缀 比如在main.js引入组件时，.vue后缀可以省略 alias:{ 'vue$':'vue/dist/vue.esm.js" } }, plugins:[//plugin是对webpack现有功能的扩展 new webpack.BannerPlugin('最终版权归77所有'),//声明版权的插件 使用该插件需要const webpack = require('webpack') 给所有文件的首行添加注释声明 new HtmlWebpackPlugin({ //打包html文件 //1,下载：npm install html-webpack-plugin --save-dev //2，导入 const HtmlWebpackPlugin = require('html-webpack-plugin') template:'index.html' }), new uglifyJsPlugin(),//使用webpack中的uglifyJsPlugin插件打包js文件。会自动删除js文件所有空格，注释，并简化一些变量等 ], devServer:{//搭建本地服务器 npm install webpack-dev-server contentBase:'./dist',//为dist文件夹提供本地服务 inline:true //页面实时刷新 }, scripts:{ "dev":"webpack-dev-server --open" //open表示可以直接打开浏览器 } }

项目中使用的都是本地的webpack，所以即使安装了全局webpack，也需要安装本地webpack【全局webpack可以不安装，只安装本地的就行了 。因为项目中都使用本地的webpack】。

补充：

npm run 其实是映射webpack命令一旦项目中需要使用node中的依赖时，直接在项目根目录npm init执行 npm run serve / npm run dev / npm run build，都是映射到相关的webpack命令。只不过使用npm run 简化了命令复杂度。

---

vue 解析钩子 next()

单点登录，同时只允许一台电脑登录账号。