-
npm i postcss-loader autoprefixer --save-dev查看全部
-
npm i style-loader css-loader --save-dev查看全部
-
module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', query: { presets: ['env'] } } ] },查看全部
-
npm install babel-preset-env --save-dev查看全部
-
npm install babel-loader babel-core查看全部
-
Version:webpack 3.10.0 css-loader style-loader的用法 1 安裝 css-loader style-loader npm i style-loader css-loader --save-dev webpack.config.js中配置style-loader css-loader { test:/\.css$/, loader:'style-loader!css-loader' } css-loader其他情況，如開發環境中設置瀏覽器兼容性不太好的樣式，解決方式：postcss-loader 2 安裝postcss-loader 后處理器 npm install postcss-import 安裝插件：npm install autoprefixer --save-dev 給樣式自動添加各個瀏覽器前綴 配置： { test:/\.css$/, use:[ 'style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, { loader: 'postcss-loader', options: { ident: 'postcss', plugins: (loader) => [ require('postcss-import')({ root: loader.resourcePath }), require('autoprefixer')({ browsers:['last 5 version'] }), ] } } ] } importLoaders: 1的作用：處理 .css文件中使用@import引用進來的文件，指css-loader后指定數量的loader處理import引用進來的資源查看全部
-
npm i html-webpack-plugin --save-dev查看全部
-
npm install webpack --save-dev查看全部
-
Version:webpack 3.10.0 加快打包速度：Node提供的API path 使用path中的resolve()方法解析 將相對路徑改為絕對路徑 module: { rules: [ { test:/\.js$/, exclude:path.resolve(__dirname+'/node_modules/'), //exclude:__dirname+'/node_modules/', //include:'/src/', include:path.resolve('/src/'), loader:'babel-loader', query: { presets:['env'] } } ] } 官網示例： path.resolve(__dirname,"app/src") 其中__dirname是當前運行環境下的路徑，app/src相對路徑查看全部
-
Version:webpack 3.10.0 主要內容：使用babel，指定babel插件presets，把頁面中的es6代碼轉換成在瀏覽器中運行js代碼 1 安裝babel npm i babel-loader babel-core babel-preset-env -D (安裝最新的插件 babel-preset-env 視頻中安裝的是npm install --save-dev babel-preset-latest) 2 webpack.config.js中參數設置 module: { rules: [ { test:/\.js$/, exclude:__dirname+'/node_modules/',//排除范圍 include:'/src/',//babel-loader的處理范圍 loader:'babel-loader', query: { presets:['env'] } } ] } 注意：include: __dirname + "/src"會報錯 loader:'babel-loader' query: { presets:['env'] } 等效于 package.json中如下設置 "babel": { "presets": [ "env" ] } exclude,include參數的用途：babel-loader是非常耗時的語法轉換，設置exclude,include可以加快打包速度查看全部
-
Version:webpack 3.10.0 自動生成html下 1 自動生成多個html頁面：設置webpack.config.js中的plugins屬性，多次調用plugin插件(new htmlWebpackPlugin()),同時設置對應數量的.js入口文件 2 指定生成的.html頁面中包含的chunk 設置屬性 chunks 或者 excludeChunks plugins: [ new htmlWebpackPlugin({ //filename:'index-[hash].html', filename:'a.html', template: 'index.html', //inject:'head', //inject:'body', inject:false, title:'this is a.html', //chunks:['main','a'] excludeChunks:['b','c'] }) 3 把初始化的腳本直接嵌入頁面（不需要http請求 提高腳本的加載速度和運行速度）而不已鏈接的形式引入到頁面 inline script: <script type="text/javascript" > <%= compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %> </script> src: <% for (var k in htmlWebpackPlugin.files.chunks) {%> <% if (k !== 'main') {%> <script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks[k].entry %>"></script> <% } %> <% } %>查看全部
-
一、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查看全部
-
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'] });查看全部
-
3 設置上線路徑 publicPath屬性 output:{ path:__dirname+'/dist', filename:'js/[name]-[chunkhash].js', publicPath:'http://cdn.com/'//線上地址 } path和publicPath的區別：path是在本地指定的用來放打包后的文件的地址，publicPath是占位符，設置上線路徑，打包后index.html中.js文件路徑替換為以上線路徑為開頭的路徑 eg:<script type="text/javascript" src="http://cdn.com/js/main-e788f47bed10bb13350c.js"> <script type="text/javascript" src="http://cdn.com/js/a-2a2e1ae69e12b7de304a.js"></script> 滿足上線需求 4 壓縮.html文件上線 設置屬性minify plugins: [ new htmlWebpackPlugin({ minify:{ removeComments:true,//刪除注釋 collapseWhitespace:true//刪除空格 } }) ]查看全部
-
Version:webpack 3.10.0 自動化生成html中 1 webpack.config.js中plugins屬性傳參，在index.html模板中引用 webpack.config.js傳參title,date plugins: [ new htmlWebpackPlugin({ filename:'index.html',//查看每次打包更新后的結果 template: 'index.html', inject:false, title:'webpack is good', date:new Date() }) ] index.html模板中獲取屬性值 <%= htmlWebpackPlugin.options.title%> <%= htmlWebpackPlugin.options.date%> <%= %>指取值 2 遍歷htmlWebpackPlugin對象 <% 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腳本，將遍歷結果用JSON.stringify字符串化 通過遍歷的結果可以方便的把我們想要的內容放在任意的位置： main.js放在head標簽中： src="<%= htmlWebpackPlugin.files.chunks.main.entry%>">a.js放在body標簽中：src="<%= htmlWebpackPlugin.files.chunks.a.entry%>" 注意：inject屬性值改為false查看全部
舉報
0/150
提交
取消