【工具】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基本介绍
webpack是前端打包工具
将js、css等文件视为一个模块,将外部或者第三方文件也视为一个模块,实现按需加载;使浏览器可以在最短期打开项目;有一个代码分割的特性;使用loader处理样式、图片、字体等;适合大型项目操做;具备模块热更新功能;官网教程齐全。
1.2 webpack安装与命令行
一、安装: (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字段中。) 二、项目操做 (1)用编辑器打开当前目录:终端输入:atom ./ (视频中老师用的编辑器是atom) (2)编辑器中:新建一个目录,命名为hello.js (3)webpack打包:终端输入:webpack hello.js hello.bundle.js(前面是要打包的文件名字,后面是打包后的文件名字) asset下是此次打包生成的文件,chunks此次打包的分块,chunk Names此次打包的块名称。 三、webpack支持的三种模块化方式:md,commonJs, es6. require(‘.world.js’)的写法是commonJs的 四、webpack天生不支持css类型的文件,若是要处理这种文件,就要依赖Loader. 五、安装loader (1)终端项目目录输入:npm install css-loader style-loader --save-dev (2)require('style-loader!css-loader!./style.css');表示引用文件以前,要引入loader
六、每一个css文件都要写sloader的话很麻烦,能够经过环境配置来避免这些重复的输入: 终端项目目录输入:webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' (aSuncat: css-loader后面不要加!,mac下是单引号'',windows是双引号"") 七、每次修改文件,都要从新输入命令,让文件自动更新,自动打包,能够用--watch的参数 终端项目目录输入:webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch 八、打包过程的progress 终端输入:webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --progress 九、引用的模块 终端项目目录输入:webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --progress --display-modules 十、为何打包模块的缘由 终端项目目录输入:webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --progress --display-modules --display-reasons
第二章 webpack基本配置
2.1 创建项目的webpack配置文件
1、建立代码源文件目录:终端输入:mkdir src. 建立代码打包过之后的静态资源目录:终端输入:mkdir dist. 2、配置文件 ① 配置文件是默认的文件名(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 3、设置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 1、entry 一、三种输入方式 (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' }, 2、output 一、占位符有3种:[name]、[hash]、[chunkhash] 二、output的filename (1)hash: 此次打包的hash 每次终端运行webpack命令,都会生成一段信息,这段信息的第一行就有一个hash (2)chunkhash:每个chunk本身的hash 三、output的path,//这里配置的是输出的文件地址
第三章 生成项目中的HTML页面文件
3.1 自动化生成项目中的HTML页面(上)
html中引入script,若是是hash或者chunkhash生成的js,则src每次都要修改,避免修改的方法就是用webpack的插件: 一、安装webpack插件: 终端项目目录输入:npm install html-webpack-plugin --save-dev 二、配置文件中创建对插件的引用 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页面(中)
1、参数中传参,模板中引用 config中的title设置,而后对index.html中用<%= %>进行取值 <%= %>表示:须要对什么进行取值 通常引用htmlWebpackPlugin里的值,好比 2、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])对这一对象的内容字符串化 3、htmlWebpackPlugin.files.chunks[’main’].entry 就能够拿到chunk main生成的文件名称。 4、https://www.npmjs.com中搜索html-webpack-plugin能够看到对插件的详细解释 5、path:输出的时候把全部文件都放到合格目录下 publicPath:占位符,须要上线,设置时,若是设置为http://cdn.com,这样js的路径就会替换为绝对地址以http://cdn.com开头的路径,这样就能知足上线需求了。 6、minify,对上线的html进行压缩 https://www.npmjs.com,输入html-webpack-plugin,而后搜索minify,找到html-minify的连接点进去,能看到minify的参数列表。 1.removeComments:true //删除注释 2. collapseWhitespace: true//删除空格
3.3 自动化生成项目中的HTML页面(下)
1、若是想用不一样的模版生成不一样的html文件,只用在plugins里添加各类htmlWebpackPlugin的实例就行了。 2、页面中引入inline的script github上,ampedandwired/html-webpack-plugin/examples/inline/template.jade中能够看到代码。 3、htmlWebpackPlugin.files.chunks.entry就是chunks输出的地址 4、main以inline的形式引进,a,b,c之外链的形式引进 一、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 5、小结 一、html和动态生成的文件一一对应。 二、htmlWebpackPlugin,如何自定义html,而且经过模板,参数如何传参。 三、多页面时,如何经过htmlWebpackPlugin生成多个html 四、深刻探究经过htmlWebpackPlugin,结合模板的方式把生成的js,经过inline引入到html中。
第四章 处理项目中的资源文件
4.1 什么是loader以及它的特性
1、新建一个组件(component),layer有本身的模版文件和css文件还有js文件。而后用export default导出去能够给别人调用。这都是es6的写法。 2、loader能够生成额外的文件. (外注:Webpack 自己只能处理原生的 JavaScript 模块,可是 loader 转换器能够将各类类型的资源转换成 JavaScript 模块。这样,任何资源均可以成为 Webpack 能够处理的模块。) 3、进入webpack网站的user loaders: 使用loader的三种方式 一、require的路径前面加loader! 二、直接配置配置文件 loaders test:对资源的正则匹配,若是匹配到Loader,就会对其进行处理。 三、直接使用CLI webpack --module-bind jade --module-bind 'css=style!css',指定了2个loader,先是css loader,而后是style loader
4.2 使用babel-loader转换ES6代码(上)
1、babel 一、babel是一个转换编译器,它能将ES6转换成能够在浏览器中运行的代码 二、安装babel 终端目标文件夹输入:npm install --save-dev babel-loader babel-core 三、loader:'babel-loader'能够正常运行,视频中的loader:'babel'不能正常运行。 四、babel的loader是一个很是耗时的转换。改善以前的时间是8260ms。 2、query: ['kwɪərɪ]查询 · presets:[priː'sets] 3、安装plugin的latest 终端目标文件输入:npm install --save-dev babel-preset-latest 4、改善: (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 5、给loader指定参数presets 一、直接Loader后跟问号 require('url-loader?mimetype=images/png!./file.png'); 二、配置文件中跟问号 三、配置文件中用query 四、项目根目录创建babelrc配置文件,配置文件中一个对象,对象中参数为presets. 五、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':相对路径 解析完了以后能够获得一个绝对路径 二、改善方法: (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
1、安装style-loader和css-loader 终端目标文件输入:npm i style-loader css-loader --save-dev 2、webpack能够将任何资源视为一个模块。 3、这里将css引用进来, 一、app.js:用的是es6的import语法 二、webpack.config.js: module的loaders 4、postcss-loader 对css进行浏览器兼容性考虑时,能够用到这个loader 一、安装postcss-loader 终端目标文件输入:npm install postcss-loader --save-dev 二、是一个后处理器。 三、能够加浏览器的前缀 (1)安装autoprefixer 终端目标文件输入:npm install autoprefixer --save-dev 四、loader处理方式是从右到左,即从数组的最后一项往前 五、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
1、less-loader 一、安装: 终端目标文件输入: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没有装 二、安装less 终端目标文件输入:npm i less --save-dev 2、less-loader 基本配置是 loader: ‘style-lander!css-loader!postcss-loader!less-loader’ 3、sass-loader 一、安装 终端目标文件输入: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 处理模板文件
1、layer.html是模板文件 一、处理模板文件的作法:(1)webpack将模板文件当作一个字符串进行处理。(2)webpack将模板文件当成已经编译好的的模板的处理函数。 对js模板语法,模板引擎,模板的做用的认识和了解再来看这章会比较容易理解。 2、要支持html文件,安装html-loader 终端目标文件输入:npm install html-loader --save-dev 3、要支持.ejs文件或者是.tpl文件,安装ejs 终端目标文件输入:npm install ejs-loader --save-dev layer.js载入ejs模板时,返回的是一个function,这时的import tpl from './layer.tpl';中的tpl表明的再也不是字符串,表示的是一个已经编译过的函数 4、react——jsx vue——jsx
4.7 处理图片以及其它文件
1、添加图片 一、css中的背景图片。 (1)安装file-loader 终端目标文件输入:npm install file-loader --save-dev 二、模板文件layer.tpl直接引用图片。 (1)绝对路径:直接写绝对路径就行。 (2)相对路径: <img src="${require('../../assets/bg.jpg')}" 三、最根部的文件index.html引用图片。 (1)绝对路径:直接写绝对路径就行。 (2)相对路径:file-loader 2、图片打包后的输出地址: 一、 query:{ name:'assets/[name]-[hash:5].[ext]' } 二、安装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编码存在那里,会形成代码的冗余,增长代码的体积。 3、压缩图片 一、安装image-webpack-loader 终端目标文件输入:npm install image-webpack-loader --save-dev 二、先压缩文件再传给url-loader判断。
相关文章
相关标签/搜索