-
css-loader使WEBPACK可以處理CSS文件，style-loader則是可以便HTML插入STYLE標簽查看全部
-
安裝好相應的模塊包后還需要制定文件類型查看全部
-
webpack 入口文件 出口文件查看全部
-
webpack --config webpack.config.js --progress --display-modules --colors --display-reason查看全部
-
可以使用exclude或者include去指定打包范圍，可以減小打包的速度查看全部
-
三種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'查看全部
-
配置webpack.config.js文件時，路徑設置參考webpack官方文檔API，較新的版本當中，輸出無需單獨寫path，可一并寫入filename。 output：{filename：‘dist/bundle.js’} 打包時需要添加腳本，可在json中scripts下，插入想要的webpack腳本。 "webpack": "webpack --config webpack.config.js --display-modules --progress --color"查看全部
-
CSS文件需要安裝 style-loader、css-loader兩依賴，并在命令行中打包指令后，加入 --module-bind 將該類型綁定。 webpack input.x output.x --module-bind 'css=style-loading!css-loading' 編寫代碼過程中多次修改，每次修改結束后要預覽效果，需要重新打包，過程會比較繁瑣，因此在打包命令后，加入-watch以監聽改變，自動更新。 --progress 可以看到文件打包的過程。 --display-modules 將羅列所有引用的模塊及相應模塊的處理方式查看全部
-
在可以通過inject的方式注入js文件的同時，是沒有辦法再加入內聯js，如果不使用compilation.assets的話是會一直報錯的，可以看看https://github.com/jantimon/html-webpack-plugin/blob/master/examples/inline/template.jade里面插件作者的代碼查看全部
-
41.webpack和npm run webpack的區別：前者是webpack默認的基本命令，后者是執行package.json里面的scripts標簽。 42.html-loader可以處理webpack中的HTML模板 1.安裝：npm install html-loader --save-dev 2.配置：{ test:/\.html$/, loader:'html-loader' } 3.app.js中引入并初始化： import './css/common.css'; import Layer from './components/layer/layer.js'; const App = function() { var dom = document.getElementById('app'); var layer = new Layer(); dom.innerHTML = layer.tpl; } new App(); 注意事項： 1.html-webpack-plugin 會和 html-loader沖突，如果引入html-loader 會導致<%=htmlWebpackPlugin.options.title %> 編譯不出。 2.inject: 'body'不能寫成head,那樣獲取不到app這個id,因為<div id='app'></div>是在body中。 3.編譯后不會再 ./dist/index.html中顯示，但在瀏覽器中可以顯示。 43.webpack的tpl模板支持ejs語法， 1.ejs安裝：cnpm install ejs-loader --save-dev 2.配置：{ test:/\.tpl$/, loader:'ejs-loader' } 3.寫法： <h1>study hard! my name is <%=name%></h1> <%for(var i=0;i<arr.length;i++){%> <%=arr[i]%> <%}%> 4.傳參：dom.innerHTML = layer.tpl({ name:'xiaohe', arr:['oppo','huawei','xiaomi'] });查看全部
-
webpack tag查看全部
-
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration has an unknown property 'postcss'. These properties are valid: object { amd?, bail?, cache?, context?, dependencies?, devServer?, devt For typos: please correct them. For loader options: webpack 2 no longer allows custom properties in configuration. Loaders should be updated to allow passing options via loader options in module.rules. Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader: plugins: [ new webpack.LoaderOptionsPlugin({ // test: /\.xxx$/, // may apply this only for some modules options: { postcss: ... } }) ] 原因：Webpack 2.1.0-beta23 之后的config里不能直接包含自定義配置項 解決辦法：新建文件postcss.config.js，寫入：module.exports = { plugins: [ require('autoprefixer')({ browsers: ['last 5 versions'] }) ] };查看全部
-
Windows下"css=style-loader!css-loader"必須用雙引號，單引號報錯查看全部
-
查看cli參數要輸入webpack --help查看全部
-
webpack主要特點： 1.代碼分割 2.按需加載3.整合第三方類庫 模塊熱更新配置，提高開發效率 使用webpack進行打包步驟： 1.npm init 初始化文件 2.npm install webpack --save-dev 安裝webpack 3.新鍵hello.js文件 4.webpack hello.js hello.bundle.js 打包壓縮文件 成功之后信息介紹：asset：打包生成的文件 Chunks:打包的塊 Chunk Name打包的塊名稱 5.查看全部
舉報
0/150
提交
取消