-
在webpack 3.10 中跑通，但是加了require('postcss-import')(),在生成的html里的style没有看到效果 { test: /\.css$/, loader: [ 'style-loader', 'css-loader', { loader: 'postcss-loader', options: { plugins: [ require('postcss-import')(), require('autoprefixer')({ broswers: ['last 5 versions'] }) ] } } ] }查看全部
-
我也是变慢了 const htmlWebpackPlugin = require('html-webpack-plugin') const path = require('path') module.exports = { entry: './src/app.js', output: { path: __dirname + '/dist/', // 输出目录 filename: 'js/[name]-bundle.js' }, module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', // 排除不用处理的目录 // path.resolve 可以直接解释成绝对路径 exclude: path.resolve(__dirname, 'node_modules'), include: path.resolve(__dirname, 'src'), // 指定处理的范围 query: { presets: ['latest'] // 告诉babel怎么处理我们的js } } ] }, plugins: [ new htmlWebpackPlugin({ filename: 'index.html', // 输出文件名 template: 'index.html', // 模版html inject: 'body' }) ] }查看全部
-
const htmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: './src/app.js', output: { path: __dirname + '/dist/', // 输出目录 filename: 'js/[name]-bundle.js' }, module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', exclude: '/node_modules/', // 排除不用处理的目录 include: '/src/', // 指定处理的范围 query: { presets: ['latest'] // 告诉babel怎么处理我们的js } } ] }, plugins: [ new htmlWebpackPlugin({ filename: 'index.html', // 输出文件名 template: 'index.html', // 模版html inject: 'body' }) ] }查看全部
-
三种loader的加载方式 1、在require中使用 require("./loader!./dir/file.txt"); 2、在配置文件中用正则表达式 { module: { loaders: [ { test: /\.jade$/, loader: "jade" }, // => "jade" loader is used for ".jade" files { test: /\.css$/, loader: "style!css" }, // => "style" and "css" loader is used for ".css" files // Alternative syntax: { test: /\.css$/, loaders: ["style", "css"] }, ] } } 3、使用CLI方式（命令行界面） $ webpack --module-bind jade --module-bind 'css=style!css'查看全部
-
var h = require('html-webpack-plugin') module.exports = { entry: { main: './src/script/main.js', a: './src/script/a.js', b: './src/script/b.js', c: './src/script/c.js' }, output: { path: __dirname + '/dist/', // 输出目录 publicPath: 'http://cdn.com', // 上线地址，如此参数存在，则生成的index.html绝对地址以这个开头的路径 filename: 'js/[name]-[chunkhash].js' }, plugins: [ new h({ filename: 'a.html', // 输出文件名 template: 'index.html', // 模版html inject: false, title: 'This is a.html', // chunks: ['main', 'a'], // 按需插入指定的js excludeChunks: ['b', 'c'] // 和上面的方法反着来，意思是：除了声明的这2个，其余都排除 }) ] } ps: 因笔记字数限制，htmlWebpackPlugin的数组里少写了2个配置查看全部
-
<html> <head> <meta charset="uth-8"> <title><%= htmlWebpackPlugin.options.title %></title> <script> // 这样子可以不用引入，直接把里面的代码拿过来行内使用 <%= compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %> </script> </head> <body> <script> // 排除main， 留下其它 <% for(var k in htmlWebpackPlugin.files.chunks) { %> <% if (k !== 'main') { %> <script src="<%= htmlWebpackPlugin.files.chunks[k].entry %>"></script> <% } %> <% } %> </script> </body> </html>查看全部
-
<html> <head> <meta charset="uth-8"> <title><%= htmlWebpackPlugin.options.title %></title> <script src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script> </head> <body> 当前时间是: <%= htmlWebpackPlugin.options.date %> <br /> <script src="<%= htmlWebpackPlugin.files.chunks.a.entry %>"></script> <!-- 注释测试，这个会被删除 --> </body> </html>查看全部
-
var htmlWebpackPlugin = require('html-webpack-plugin') module.exports = { // entry: ['./src/script/main.js', './src/script/a.js'], entry: { main: './src/script/main.js', a: './src/script/a.js' }, output: { path: __dirname + '/dist/', // 输出目录 publicPath: 'http://cdn.com', // 上线地址，如此参数存在，则生成的index.html绝对地址以这个开头的路径 filename: 'js/[name]-[chunkhash].js' }, plugins: [ new htmlWebpackPlugin({ template: 'index.html', // inject: 'head', // 插入到head里 inject: false, title: 'leo is good', date: new Date(), minify: { // 压缩代码 removeComments: true, // 删除注释 collapseWhitespace: true // 删除空格 } }) ] }查看全部
-
var htmlWebpackPlugin = require('html-webpack-plugin') module.exports = { // entry: ['./src/script/main.js', './src/script/a.js'], entry: { main: './src/script/main.js', a: './src/script/a.js' }, output: { path: __dirname + '/dist/', filename: 'js/[name]-[chunkhash].js' }, plugins: [ new htmlWebpackPlugin({ template: 'index.html' }) ] }查看全部
-
一、参数中传参，模板中引用 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文件夹中 },查看全部
-
经过@import引入的css文件不会被post-css加载器解析查看全部
-
loader的处理方式是从右到左查看全部
-
babel语法转换非常耗时导致转换比较慢 解决办法：使用include、exclude查看全部
-
url-loader : 做一个限制把小于阈值大小的图片打包成base64，file-loader把图片打包起来查看全部
举报
0/150
提交
取消