-
在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
提交
取消