-
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查看全部
-
一、webpack里的配置loader的基本格式： module: { loaders: [ { test: /\.js/, // 这里test是正则匹配，匹配给哪些用 loader: ‘babel’, //这是loader的名字 exclude: ‘./node_modules/’, //这个配置的意思是排除哪些文件，这句话就是不对node_modules文件夹进行loader。 include: './src/‘,//这个配置的意思是指定打包的范围，这两个配置是提升打包速度的关键 query: { // query的意思是给loader加上参数 presets: [“latest”] //presets表示里面的参数名还有值 } } ] } 二、babel 1、babel是一个转换编译器,它能将ES6转换成可以在浏览器中运行的代码 2、安装babel，npm install --save-dev babel-loader babel-core 3、loader:'babel-loader'可以正常运行，视频中的loader:'babel'不能正常运行。 三、安装plugin的latest npm install --save-dev babel-preset-latest 四、改善：exclude,include参数 例如：exclude:'./node_modules/',//node_modules是已经引用过的，已经打包过的文件，其实这里对速度没有影响，这是告诉你如果是不相关的文件，可以用exclude include:'./src/‘, 五、给loader指定参数presets 1、直接Loader后跟问号 require('url-loader?mimetype=images/png!./file.png'); 2、配置文件中跟问号 3、配置文件中用query 4、项目根目录建立babelrc配置文件，配置文件中一个对象，对象中参数为presets. 5、config.js中指定babel，babel指定presets.查看全部
-
一、新建一个组件（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查看全部
-
一、如果想用不同的模版生成不同的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中。查看全部
-
webpack的三种用法 1.直接命令行使用。 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，//这里配置的是输出的文件地址查看全部
-
2.0版本直接合并会报错“Conflict: Multiple assets emit to the same filename bundle.js ”，但是文件依然会生成。官方给出的标准是两个文件打包后还是两个文件，并不进行合并，如：path: './dist/js', filename: '[name].js', filename区别 1.【name】。js 生成的是源文件名称的两个文件夹 【name】-【hash】。js 打包后的文件名就是源文件名加上hash值 源Hash: 6ed8fcb869f32b6d0cf6 生成的是main-6ed8fcb869f32b6d0cf6.js 注意的是 这个hash值和文件名hash值相对 【name】-【chunkhash】。js 和上面一样 生成的文件名就是源文件名加上hash值 唯一不同的是 文件名的hash值和生成的hash值不一样 源Hash: 18a8a031019648cb4892 生成的是main-739dc04ca19361abc6a7.js查看全部
-
一、参数中传参，模板中引用 config中的title设置，然后对index.html中用<%= %>进行取值 <%= %>表示：需要对什么进行取值 一般引用htmlWebpackPlugin里的值，直接htmlWebpackPlugin.options.title。 二、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//删除空格查看全部
-
一、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文件夹中 },查看全部
-
webpack的三种用法 1.直接命令行使用。 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，//这里配置的是输出的文件地址查看全部
-
一、创建代码源文件目录：终端输入：mkdir src. 创建代码打包过以后的静态资源目录：终端输入：mkdir dist. 文件目录是： web pack-demo —dist —src ——script ———main.js ——style ——— —index.html —package.json —webpack.config.js 二、视频中的是webpack1，我安装的是webpack2。 视频中的webpack.config.js文件中的path，改成：path:path.resolve(__dirname,'./dist/js'), 然后在文件的第一行加上var path=require('path'); 三、如果是webpack.config.js改名字，改成webpack.dev.config.js 终端目标文件输入：webpack会失效 终端目标文件输入：webpack --config webpack.dev.config.js会生效 四、package.json中的scripts中写入webpack的参数后， 终端目标文件输入：npm run webpack 参数说明： —progress 表示想查看打包的进度 —display-modules 显示模块 —colors 日志有颜色 —display-reasons 打包的原因 五、webpack.config.js文件里的写法 module.exports ={} // 这样的写法是为了能让webpack能import到里面的内容，因为这个配置文件毕竟是js文件，需要被webpack工具调用。 里面最基本的配置属性有： entry: //入口文件，可以是字符串（直接输入文件的地址），可以是对象或者数组。 output:{ //这个是输出文件的配置 path: , //这里配置的是输出的文件地址 filename: //这里是输出的文件名 }查看全部
-
老师使用的webpack应该是1.0版本，在2.0可以这样写，就不会报错： module.exports = { entry:'./src/script/main.js', output:{ filename:'./dist/bundle.js' } }查看全部
-
webpack处理后的js内容直接插入到html中，用compilation.assets查看全部
-
利用html-webpack-plugin的插值语法，将不同的chunk插入到不同的位置查看全部
-
htmlWebpackPlugin支持js模板语言语法，默认EJS查看全部
-
老师的webpack版本是1.X，目前已经更新到2.X，使用2.x版本的朋友配置上稍微有点和老师说的不一样： 1： 在webpack.config.js里面，向loader传参不在使用query，而是使用options {test: '/\.js$/', loader: 'babel-loader', options: {'presets': ['env']}} （-loader不可以省略） 2： 另外如果是在.babelrc文件中配置的话，千万不要给.babelrc文件添加诸如js, json的后缀名，这个文件没有后缀，切记！切记！查看全部
举报
0/150
提交
取消