-
一、webpack 1、安装: （1）进入指定目录 （2）新建文件夹：终端输入：mkdir webpack-test （3）进入文件夹：终端输入：cd webpack-test （4）文件夹下初始化npm：终端输入：npm init （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查看全部
-
如果css文件中出现@import，则有两种处理方式，一种是将postcss文件单独写成配置文件postcss.config.js //webpack.config.js { test:/\.css$/, use:[ 'style-loader', { loader: 'css-loader', options: {importLoaders: 1} }, 'postcss-loader' ] } //postcss.config.js module.exports = { plugins:[require('autoprefixer')] } 另一种需要安装postcss-import插件 npm install postcss-import //webpack.config.js { test:/\.css$/, use:[ 'style-loader', { loader: 'css-loader', options: {importLoaders: 1 } }, { loader: 'postcss-loader', options: { plugins: [ require('postcss-import'), require('autoprefixer') ] } } ] }查看全部
-
一、如果想用不同的模版生成不同的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中。查看全部
-
webpack2.6.0版本，设置输出文件路径时，报错 Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.output.path: The provided value "./dist/js" is not an absolute path! 官方文档： 需要先引入path模块， const path = require('path') 然后再在output中设置path:path.resolve(__dirname,'dist/js') module.exports = { entry : './src/script/main.js', output:{ path: path.resolve(__dirname,'dist/js'), filename: 'bundle.js' } }查看全部
-
6、style-loader!cssloader!如果每个css文件都要写的话，就很麻烦，可以通过环境配置来避免这些重复的输入： （1）终端项目目录输入：webpack （2）终端项目目录输入：webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' （aSuncat: css-loader后面不要加！,mac下是单引号''，windows是双引号""） 7、每次修改文件，都要重新输入命令，让文件自动更新，自动打包，可以用--watch的参数 （1）终端项目目录输入：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的三种用法 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. 二、视频中的是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查看全部
-
一、webpack 1、安装: （1）进入指定目录 （2）新建文件夹：终端输入：mkdir webpack-test （3）进入文件夹：终端输入：cd webpack-test （4）文件夹下初始化npm：终端输入：npm init （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查看全部
-
webpack2.6.1版本 配置chunks为不同的html指定不同的entry 报错ERROR in Template execution failed: TypeError: Cannot read property 'entry' of undefined ERROR in TypeError: Cannot read property 'entry' of undefined 将模板index.html里里引用的js删掉就好了，只注释没用要删掉才行查看全部
-
我根据老师讲解的内容用webpack2.0写了一遍，源码在https://github.com/manlili/webpack_learn，喜欢给点颗星星，谢谢！查看全部
-
一、参数中传参，模板中引用 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//删除空格查看全部
-
一、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查看全部
-
一、参数中传参，模板中引用 config中的title设置，然后对index.html中用<%= %>进行取值 <%= %>表示：需要对什么进行取值 二、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])对这一对象的内容字符串化 三、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的参数列表。查看全部
-
一、entry 1、三种输入方式 （1）string，输入字符串 entry:{ main:'./src/script/main.js' }, （2）array, 数组。适用情况：两个平行的，不相依赖的文件打包在一起。 entry:{ main:['./src/script/main.js','./src/script/a.js'] }, （3）object, 适用情况：多页面应用程序 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查看全部
-
4.x版本以上的webpack在输入打包命令时，webpack hello.js hello.bundel.js是报错的，应用新的命令
webpack hello.js -o hello.bundel.js
查看全部
举报
0/150
提交
取消