-
插件名称 html-webpack-plugin查看全部
-
一、const:['kɒnst],常量，常数。 export:[ˈekspɔːt；ɪkˈ-] :输出，导出。 二、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查看全部
-
一、页面中引入inline的script github上，ampedandwired/html-webpack-plugin/examples/inline/template.jade中可以看到代码。 二、assets:[ˈæsets] 资产 compilation:[ˌkɒmpɪˈleɪʃn] n.汇编，编辑 三、htmlWebpackPlugin.files.chunks.entry就是chunks输出的地址 四、main以inline的形式引进，a,b,c以外链的形式引进 1、index.html中 （1）head中 <script type="text/javascript"> <%= compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %> </script> compilation.assets是打包以后生成的文件对象。通过传文件名路径进这个对象，拿到这个文件的索引，通过调用source拿到文件内容。 compilation.assets需要的是不带publicPath，htmlWebpackPlugin.files.chunks.main.entry带publicPatch，所以用substr()截取。 （2）body中 <% for (var k in htmlWebpackPlugin.files.chunks){ %> <% if(k!='main') %> <script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks[k].entry %>"></script> <% } %> <% } %> （3）config.js中 inject为false查看全部
-
一、参数中传参，模板中引用 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的参数列表。查看全部
-
一、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:[] （3）文件生成在dist下，而不是一直在js下 output:{ path:path.resolve(__dirname,'./dist'), filename:'js/[name]-[chunkhash].js'//js文件生成到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, 适用情况：多页面应用程序 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查看全部
-
插件的其它参数： plugins:[ new htmlWebpackPlugin({ filename:'index-[hash].html', //文件名 template:'index.html',//传参，让两个html文件建立联系 inject:'head' ,//让生成的script标签放在head标签还是body标签中 title: 'i am back' //html中的title要取到这个值，需要写成：<title><%= htmlWebpackPlugin.options.title %></title> }) ] 插件参数与调用 <body> <!--查看htmlWebpackPlugin下所有参数--> <!--JSON.stringify：JSON方法，让数组或者对象都转化为字符串--> <% for(var key in htmlWebpackPlugin.files){ %> <%= key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key]) %> <% }%> <% for(var key in htmlWebpackPlugin.options){ %> <%= key %> : <%= JSON.stringify(htmlWebpackPlugin.options[key]) %> <% }%> </body> 上线操作 1. 设置上线地址：在output中添加publicPath属性 output:{ publicPath:'http://cdn.com' } 2. 压缩当前生成的html文件：在plugins中添加minify属性 minify:{ removeComments:true,//去掉注释 collapseWhitespace:true,//去掉空格、空行 } npm插件查询官网：https://www.npmjs.com/查看全部
-
安装并引用插件 针对每次修改js文件之后，[hash]占位符就会改变，在index.html引用中，每次都要更改文件名的繁琐工作，可以利用插件解决 1. 命令窗口输入：npm install html-webpack-plugin --save-dev 2. 在配置文件webpack.config.js中引用插件：var htmlWebpackPlugin = require('html-webpack-plugin'); 3. 在插件属性中初始化plugin： module.exports = { plugins:[ new htmlWebpackPlugin() ] } 4. 再打包一次：在命令窗口输入npm webpack run 5. 生成的index.html文件就能自动引用之前生成的两个js文件 6. 让两个ndex.html建立联系：在plugins的设置中加入模板参数： module.exports = { plugins:[ new htmlWebpackPlugin({ template: 'index.html' //此时上下文环境默认在根目录下 }) ] } 7. 让生成的js和html文件放在不同的文件夹下：修改output参数 output:{ path: path.resolve(__dirname, 'dist'),//打包后的存放路径 filename:'js/[name]-[chunkhash].js' //增加一个相对路径 }, 8. 插件的其它参数： plugins:[ new htmlWebpackPlugin({ filename:'index-[hash].html', //文件名 template:'index.html',//传参，让两个html文件建立联系 inject:'head' //让生成的script标签放在head标签还是body标签中 }) ]查看全部
-
lodaer查看全部
-
webpack:代码分割查看全部
-
数据查看全部
-
三 entry 有三种设置方式：字符串型单个路径，数组型路径，对象 1. 单个路径：entry:'./src/script/main.js', 2. 数组路径：在webpack.config.js文件中，将entry修改为：entry:['./src/script/main.js','./src/script/a.js'] 3. 对象：分为key和value，key表示 chunk name，value表示真实的entry，此时的entry可以是单个路径也可以是数组路径。主要应用于多页面场景 四 output 当entry采用对象设置时，为了使拥有不同chunk name的文件分别打包，需要设置output * 修改filename：filename:'[name]-[chunkhash].js' （注意：此时有三种占位符可以选择。[name]对应chunk name，[hash]本次打包的哈希值，[chunkhash]每一个chunk都对应一个哈希值，如果文件被修改，哈希值就随之变化，如果文件没有修改，哈希值就保持和上次打包的一样）查看全部
-
一 配置文件 ① 配置文件是默认的文件名（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"查看全部
-
//webpack2.0 解决style-loader!css-loader!post-loader问题,并解决css中@import的问题 //webpack.config.js module:{ rules:[ { test:/\.css$/, use:[ 'style-loader', { loader:'css-loader', options:{ importLoaders: '1' } }, { loader:'postcss-loader', options:{ plugins:function(){ return [ require('autoprefixer')({broswers:['last 5 versions']}) ]; } } } ] }, ] } //解决@import(前提要引入require(webpack)) plugins: [ new webpack.LoaderOptionsPlugin({ options: { postcss: function(){ return [ require("autoprefixer")({ browsers: ['ie>=8','>1% in CN'] }) ] } } }) ]查看全部
-
webpack 先全局安装 npm install webpack -g 然后再安装到当前目录 npm install webpack --save-dev,目录的名字不能是webpack;如果这一步安装出错，先 npm cache clear 命令行添加style-loader、css-loader webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch --watch 文件改变自动打包查看全部
举报
0/150
提交
取消