【工具】Webpack

远程仓库建立

码云创建组织项目

git clone ssh

切换到主分支mmall-fe后git remote add origin ssh

git pull origin master把master分支拉下来

建立git的忽略规则

git checkout -b xx_v1.0表示创建并切换分支

建立一个scr文件夹，里面建立view、page、service、util、image的文件夹

测试

创建文件

git init

git status

git add .

git commit -am '测试'

git push

webpack和npm安装使用

$ npm init

$ npm install webpack@1.15.0 --save-dev

$ webpack ./src/page/index/index.js ./dist/app.js

根目录下创建一个webpack.config.js更改固定内容

webpack对脚本样式处理

$ npm install css-loader style-loader --save-dev

$ npm install extract-text-webpack-plugin@1.0.1 --save-dev

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

$ npm install html-loader --save-dev

$ npm install url-loader --save-dev

webpack-dev-server的启用

$npm install webpack-dev-server@1.16.5

$npm install webpack-dev-server -g

执行webpack-dev-server得到可以打开的地址

$ webpack-dev-server --inline --port 8088

在package.json中简化命令

$npm run dev_win

、《Webpack深入与实战》

第一章 webpack基本介绍

1.1 webpack基本介绍

1.2 webpack安装与命令行

第二章 webpack基本配置

2.1 建立项目的webpack配置文件

2.2 webpack配置文件的entry和output new

第三章 生成项目中的HTML页面文件

3.1 自动化生成项目中的HTML页面（上）

3.2 自动化生成项目中的HTML页面（中）

3.3 自动化生成项目中的HTML页面（下）

第四章 处理项目中的资源文件

4.1 什么是loader以及它的特性

4.2 使用babel-loader转换ES6代码（上）

4.3 使用babel-loader转换ES6代码（下）

4.4 处理项目中的CSS

4.5 使用less及sass

4.6 处理模板文件

4.7 处理图片以及其它文件

第一章 webpack基本介绍

1.1 webpack基本介绍

webpack是前端打包工具

将js、css等文件视为一个模块，将外部或者第三方文件也视为一个模块，实现按需加载；使浏览器能够在最短时间打开项目；有一个代码分割的特性；使用loader处理样式、图片、字体等；适合大型项目操作；具有模块热更新功能；官网教程齐全。

1.2 webpack安装与命令行

1、安装: （1）进入指定目录 （2）新建文件夹：终端输入：mkdir webpack-test （3）进入文件夹：终端输入：cd webpack-test （4）文件夹下初始化npm：终端输入：npm init 出现package.json （5）全局装webpack:终端输入：npm install webpack -g （注：第一次运行webpack项目时，如果没有这一步，而直接执行下一步的话，会提示错误：webpack: command not found） （6）文件夹中装webpack:终端输入：npm install webpack --save-dev 出现 (参数-g的含义是代表安装到全局环境里面，参数--save-dev的含义是代表把你的安装包信息写入package.json文件的devDependencies字段中。) 2、项目操作 （1）用编辑器打开当前目录：终端输入：atom ./ （视频中老师用的编辑器是atom） （2）编辑器中：新建一个目录，命名为hello.js （3）webpack打包：终端输入：webpack hello.js hello.bundle.js（前面是要打包的文件名字，后面是打包后的文件名字） asset下是这次打包生成的文件，chunks这次打包的分块，chunk Names这次打包的块名称。 3、webpack支持的三种模块化方式：md，commonJs, es6. require(‘.world.js’)的写法是commonJs的 4、webpack天生不支持css类型的文件，如果要处理这种文件，就要依赖Loader. 5、安装loader （1）终端项目目录输入：npm install css-loader style-loader --save-dev （2）require('style-loader!css-loader!./style.css');表示引用文件之前，要引入loader

6、每个css文件都要写sloader的话很麻烦，可以通过环境配置来避免这些重复的输入： 终端项目目录输入：webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' （aSuncat: css-loader后面不要加！,mac下是单引号''，windows是双引号""） 7、每次修改文件，都要重新输入命令，让文件自动更新，自动打包，可以用--watch的参数 终端项目目录输入：webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch 8、打包过程的progress 终端输入：webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --progress 9、引用的模块 终端项目目录输入：webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --progress --display-modules 10、为什么打包模块的原因 终端项目目录输入：webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --progress --display-modules --display-reasons

第二章 webpack基本配置

2.1 建立项目的webpack配置文件

一、创建代码源文件目录：终端输入：mkdir src. 创建代码打包过以后的静态资源目录：终端输入：mkdir dist. 二、配置文件 ① 配置文件是默认的文件名（webpack.config.js） 1. 在文件的根目录下创建webpack.config.js文件 2. 配置参数 var path = require('path'); module.exports = { entry:'./src/script/main.js',//打包的入口 output:{ path: path.resolve(__dirname, 'dist/js'),//打包后的存放路径 （绝对路径） filename:'bundle.js'//打包后的文件名 } } 3. 在命令行 中运行：webpack ② 配置文件不是默认的文件名 1. 比如配置文件的文件名为webpack.dev.config.js 2. 在命令行中运行时：webpack --config webpack.dev.config.js 三、设置webpack参数 1. 在npm脚本文件package.json文件中设置 2. 在scripts中添加："webpack":"webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"，webpack即可替代后面代码。

2.2 webpack配置文件的entry和output new

webpack的三种用法 1.直接命令行使用。如果是直接打包就是webpack文件名和打包后的文件名，加上打包原因等这一类的自己所需要的命令。如果是css打包就再加上css-loader。 2.node.js API的使用方式。 3.webpack —config webpack.config.js 一、entry 1、三种输入方式 （1）string，输入字符串 entry:{ main:'./src/script/main.js' }, （2）array, 数组。适用情况：两个平行的，不相依赖的文件打包在一起。 entry:{ main:['./src/script/main.js','./src/script/a.js'] }, （3）object, 适用情况：多页面应用程序。这里要和output里的[name]占位符配合使用，威力才能最大。如果你要打包成多个js文件，那么entry对象里的key叫做chunk就是文件名，里面的值就是需要打包的文件里面包含的文件。 entry:{ main:'./src/script/main.js', a:'./src/script/a.js' }, 二、output 1、占位符有3种：[name]、[hash]、[chunkhash] 2、output的filename （1）hash: 这次打包的hash 每次终端运行webpack命令，都会生成一段信息，这段信息的第一行就有一个hash （2）chunkhash:每一个chunk自己的hash 3、output的path，//这里配置的是输出的文件地址

第三章 生成项目中的HTML页面文件

3.1 自动化生成项目中的HTML页面（上）

html中引入script，如果是hash或者chunkhash生成的js，则src每次都要修改，避免修改的方法就是用webpack的插件： 1、安装webpack插件： 终端项目目录输入：npm install html-webpack-plugin --save-dev 2、配置文件中建立对插件的引用 webpack.config.js中 （1）引用插件 var htmlWebpackPlugin=require('htmll-webpack-plugin'); （2）以index.html为模板 设置plugins:[ new htmlWebpackPlugin()// 初始化插件 ] 这里的代码只会让webpack自动生成一个index.html，里面自动把js代码插入到index.html当中。//注意，这里说的是webpack生成的index.html，不是你自定义的index.html。 要想让生成的index.html是自定义的，那么就要设置 plugins:[ new htmlWebpackPlugin({ template: ‘index.html’,//这里的index.html就是根目录下的index.html文件，是你自己写的文件。 filename: ‘index-[hash].html’,//这里指定的是生成的文件的名字 inject: 'body’,// 这里可以指定js文件是放在head还是body标签里面具体还可以放哪，请看文档说明。https://github.com/jantimon/html-webpack-plugin#configuration })// 初始化插件 ] （4）webpack使用插件的地址是根据配置里的context，上下文来决定的。 （5）文件生成在dist下，而不是一直在js下 output:{ path:path.resolve(__dirname,'./dist'), filename:'js/[name]-[chunkhash].js'//js文件生成到js文件夹中 },

3.2 自动化生成项目中的HTML页面（中）

一、参数中传参，模板中引用 config中的title设置，然后对index.html中用<%= %>进行取值 <%= %>表示：需要对什么进行取值 一般引用htmlWebpackPlugin里的值，比如 二、index.html中遍历： <!--遍历：得到的htmlWebpackPlugin的key是files和options,再分别对这两个key进行遍历--> <% for (var key in htmlWebpackPlugin.files){ %> <%= key %>:<%= JSON.stringify(htmlWebpackPlugin.files[key]) %> <% } %> <% for (var key in htmlWebpackPlugin.options){ %> <%= key %>:<%= JSON.stringify(htmlWebpackPlugin.options[key]) %> <% } %> 注：JSON.stringify(htmlWebpackPlugin.files[key])对这一对象的内容字符串化 三、htmlWebpackPlugin.files.chunks[’main’].entry 就可以拿到chunk main生成的文件名称。 四、https://www.npmjs.com中搜索html-webpack-plugin可以看到对插件的详细解释 五、path:输出的时候把所有文件都放到合格目录下 publicPath:占位符，需要上线，设置时，如果设置为http://cdn.com，这样js的路径就会替换为绝对地址以http://cdn.com开头的路径，这样就能满足上线需求了。 六、minify，对上线的html进行压缩 https://www.npmjs.com，输入html-webpack-plugin，然后搜索minify，找到html-minify的链接点进去，能看到minify的参数列表。 1.removeComments:true //删除注释 2. collapseWhitespace: true//删除空格

3.3 自动化生成项目中的HTML页面（下）

一、如果想用不同的模版生成不同的html文件，只用在plugins里添加各种htmlWebpackPlugin的实例就好了。 二、页面中引入inline的script github上，ampedandwired/html-webpack-plugin/examples/inline/template.jade中可以看到代码。 三、htmlWebpackPlugin.files.chunks.entry就是chunks输出的地址 四、main以inline的形式引进，a,b,c以外链的形式引进 1、index.html中 （1）在htmlWebpackPlugin的配置中有一个有一个参数chunks可以配置。 （2）head中 <script type="text/javascript"> <%=compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %></script> 重点：！！！compilation.assets是webpack暴露出来可以获取文件数据的方法。通过传文件名路径进这个对象，拿到这个文件的索引，通过调用source拿到文件内容。 compilation.assets需要的是不带publicPath，htmlWebpackPlugin.files.chunks.main.entry带publicPatch，所以用substr()截取。 （3）body中<%= htmlWebpackPlugin.files.chunks[k].entry %> （4）config.js中inject为false 五、小结 1、html和动态生成的文件一一对应。 2、htmlWebpackPlugin，如何自定义html，并且通过模板，参数如何传参。 3、多页面时，如何通过htmlWebpackPlugin生成多个html 4、深入探究通过htmlWebpackPlugin，结合模板的方式把生成的js，通过inline引入到html中。

第四章 处理项目中的资源文件

4.1 什么是loader以及它的特性

一、新建一个组件（component），layer有自己的模版文件和css文件还有js文件。然后用export default导出去可以给别人调用。这都是es6的写法。 二、loader可以生成额外的文件. (外注：Webpack 本身只能处理原生的 JavaScript 模块，但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样，任何资源都可以成为 Webpack 可以处理的模块。) 三、进入webpack网站的user loaders： 使用loader的三种方式 1、require的路径前面加loader! 2、直接配置配置文件 loaders test：对资源的正则匹配，如果匹配到Loader，就会对其进行处理。 3、直接使用CLI webpack --module-bind jade --module-bind 'css=style!css',指定了2个loader，先是css loader，然后是style loader

4.2 使用babel-loader转换ES6代码（上）

一、babel 1、babel是一个转换编译器,它能将ES6转换成可以在浏览器中运行的代码 2、安装babel 终端目标文件夹输入：npm install --save-dev babel-loader babel-core 3、loader:'babel-loader'可以正常运行，视频中的loader:'babel'不能正常运行。 4、babel的loader是一个非常耗时的转换。改善之前的时间是8260ms。 二、query: ['kwɪərɪ]查询 · presets:[priː'sets] 三、安装plugin的latest 终端目标文件输入：npm install --save-dev babel-preset-latest 四、改善： （1）webpack 的api的configuration loaders的参数5个：test,exclude,include,loader,loaders （2）改善方法：exclude,include参数 例如：exclude:'./node_modules/',//node_modules是已经引用过的，已经打包过的文件，其实这里对速度没有影响，这是告诉你如果是不相关的文件，可以用exclude include:'./src/', 1）会报错：-configuration.module.loaders[0].exclude: The provided value "./node_modules/" is not an absolute path! 2）报错的解决方法： exclude:__dirname+'/node_modules/',//已经引用过的，已经打包过的文件 include:__dirname+'/src/', （3）这样初步改善后时间是1210ms 五、给loader指定参数presets 1、直接Loader后跟问号 require('url-loader?mimetype=images/png!./file.png'); 2、配置文件中跟问号 3、配置文件中用query 4、项目根目录建立babelrc配置文件，配置文件中一个对象，对象中参数为presets. 5、config.js中指定babel，babel指定presets.

4.3 使用babel-loader转换ES6代码（下）

node中的对象path. var path = require(‘path’); 一、（改善）进一步加快解析速度： 1、path.resolve(__dirname,'app/src') node有个api：path，path有个方法：resolve（解析）。 __dirname：在运行环境下的变量，在当前环境的路径， 'app/src':相对路径 解析完了之后可以得到一个绝对路径 2、改善方法： （1）改善的代码：exclude:path.resolve(__dirname,'/node_modules/'), include:path.resolve(__dirname,'/src/') （2）这样进一步改善后时间是618ms （3）注意，如果是'node_modules'（视频中），而不是'/node_modules/'的话，也能运行。但是'/node_modules/'要更快，'/node_modules/')是618ms,而'node_modules'（视频中）花的时间是1254ms

4.4 处理项目中的CSS

一、安装style-loader和css-loader 终端目标文件输入：npm i style-loader css-loader --save-dev 二、webpack可以将任何资源视为一个模块。 三、这里将css引用进来， 1、app.js:用的是es6的import语法 2、webpack.config.js: module的loaders 四、postcss-loader 对css进行浏览器兼容性考虑时，可以用到这个loader 1、安装postcss-loader 终端目标文件输入：npm install postcss-loader --save-dev 2、是一个后处理器。 3、可以加浏览器的前缀 （1）安装autoprefixer 终端目标文件输入：npm install autoprefixer --save-dev 4、loader处理方式是从右到左，即从数组的最后一项往前 5、webpack.config.js中， 视频中的配置现在的postcss已经不支持了，我的配置是 { test: /\.css$/, loaders: [ "style-loader", "css-loader?importLoaders=1", //这里是为了把css里的@import先执行第一个loader { loader: "postcss-loader”, options: { plugins: (loader)=>[ require('autoprefixer')({ broswers:['last 5 versions'] }) ] }, } ], }

4.5 使用less及sass

一、less-loader 1、安装： 终端目标文件输入：npm i less-loader --save-dev 错误提示：npm WARN less-loader@4.0.3 requires a peer of less@^2.3.1 but none was installed. 说明less没有装 2、安装less 终端目标文件输入：npm i less --save-dev 二、less-loader 基本配置是 loader: ‘style-lander!css-loader!postcss-loader!less-loader’ 三、sass-loader 1、安装 终端目标文件输入：npm i sass-loader --save-dev 出现错误提示： npm WARN sass-loader@6.0.3 requires a peer of node-sass@^4.0.0 but none was installed. 说明需要安装node-sass，解决方法： 终端目标文件输入：npm i node-sass -g --save-dev

4.6 处理模板文件

一、layer.html是模板文件 1、处理模板文件的做法：（1）webpack将模板文件当做一个字符串进行处理。（2）webpack将模板文件当成已经编译好的的模板的处理函数。 对js模板语法，模板引擎，模板的作用的认识和了解再来看这章会比较容易理解。 二、要支持html文件，安装html-loader 终端目标文件输入：npm install html-loader --save-dev 三、要支持.ejs文件或者是.tpl文件，安装ejs 终端目标文件输入：npm install ejs-loader --save-dev layer.js载入ejs模板时，返回的是一个function，这时的import tpl from './layer.tpl';中的tpl代表的不再是字符串，表示的是一个已经编译过的函数 四、react——jsx vue——jsx

4.7 处理图片以及其它文件

一、添加图片 1、css中的背景图片。 （1）安装file-loader 终端目标文件输入：npm install file-loader --save-dev 2、模板文件layer.tpl直接引用图片。 （1）绝对路径：直接写绝对路径就行。 （2）相对路径： <img src="${require('../../assets/bg.jpg')}" 3、最根部的文件index.html引用图片。 （1）绝对路径：直接写绝对路径就行。 （2）相对路径：file-loader 二、图片打包后的输出地址： 1、 query:{ name:'assets/[name]-[hash:5].[ext]' } 2、安装url-loader url-loader和file-loader相似，但是url-loader可以指定limit参数。 （1）终端目标文件输入：npm install url-loader --save-dev url-loader可以处理文件或者图片，当文件/图片大小大于指定的limit,就会丢给filel-loader去处理，当小于设定的limit，就会转为base64编码，不再是一个url(不再是一个http请求)，图片会被打包进html,css,js （2）两种图片引用方式：①通过http请求load进来。浏览器会有缓存，比较适用于重复性较高的图片。②打包成base64。任何地方要用时，都会有base64编码存在那里，会造成代码的冗余，增加代码的体积。 三、压缩图片 1、安装image-webpack-loader 终端目标文件输入：npm install image-webpack-loader --save-dev 2、先压缩文件再传给url-loader判断。