-
Version:webpack 3.10.0 自動生成html頁面上 1 自動引入.js文件，安裝html-webpack-plugin插件 npm install html-webpack-plugin --save-dev 2 配置文件 webpack.config.js var htmlWebpackPlugin = require('html-webpack-plugin');//引用插件 module.exports = {plugins:[ new htmlWebpackPlugin()// 初始化插件 ]} 3 目前dist/js目錄下生成的.html文件與我們項目創建的index.html毫無關聯，為了自動生成項目創建的index.html，設置plugins plugins: [ new htmlWebpackPlugin({ filename:'index-[hash].html',//指定文件名字 template: 'index.html',//指定dist/js下生成項目創建的index.html inject:'head'//指定.js文件打包后放置的位置 }) 4 指定.html文件在dist目錄下，.js文件在dist/js目錄下 output:{ path:__dirname+'/dist', filename:'js/[name]-[chunkhash].js' }查看全部
-
Version:webpack 3.10.0 主要內容 entry的使用方法： 1 字符串 entry:__dirname+'/src/script/main.js' 對應output:{path:__dirname+'/dist/js',filename:'bundle.js'} 2 數組 entry:[__dirname+'/src/script/main.js',__dirname+'/src/script/a.js'] 對應output:{path:__dirname+'/dist/js',filename:'bundle.js'} 3 對象 entry:{ main:__dirname+'/src/script/main.js', a:__dirname+'/src/script/a.js' } 對應output:{path:__dirname+'/dist/js',filename:'[name]-[hash].js'} or output:{path:__dirname+'/dist/js',filename:'[name]-[chunkhash].js'} output使用方法 filename中不需要指定文件的絕對路徑，path中會確定文件的真實路徑 多輸入時filename的設置 entry中輸入多個chunk時 為確保文件名唯一避免相互覆蓋使用占位符命名filename 三種占位符 1 [name]是chunk的name 2 [hash]是本次打包的hash值，hash值相同 3 [chunkhash]是每個chunk的hash值，不相同保證文件的唯一性，只有改變文件中的內容時hash才變化未做改變的文件hash值不變查看全部
-
到當前章節的最新版本modules寫法： 記得先安裝npm install postcss-import module:{ rules:[ { test:/\.js$/, exclude:__dirname+'./node_modules/', include:__dirname+'./src/', // exclude:path.resolve(__dirname,'node_modules'), // include:path.resolve(__dirname,'src'), loader:'babel-loader' },{ 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'] }), ] } } ] } ] }查看全部
-
我安裝了下，最新版本提示我們并建議用 npm install babel-preset-env --save-dev 進行安裝。（老師寫的是npm install --save-dev babel-preset-latest） 在該項目根目錄下新建 .babelrc 文件，寫入 { "presets": ["env"] } 或者就按老師寫的。但注意latest換成env 其他寫成： exclude:__dirname+'./node_modules/', include:__dirname+'./src/', loader:'babel-loader' 注意：根目錄下index.html文件里刪除不必要的東西（注釋也別用?。胣pm run webpack打包后的dist目錄下的index.html文件會受到影響 我改善之后打包運行所需時間只需434ms，再次運行后為369ms..，下一章節按照老師寫的path.resolve路徑所需時間為878ms...查看全部
-
三種方式： 1.在項目根目錄下創建webpack.config.js module.exports = { entry: './src/script/main.js', output: { path: __dirname + '/dist/js', filename: 'bundle.js' } } 然后直接webpack就可以了 2.創建webpack.dev.config.js(自己命名) 然后要用webpack —config webpack.dev.config.js 3.創建webpack.config.js（自己命名） 在package.json的script加："webpack": "webpack --config webpack.config.js --progress —display-modules —colors” 然后npm run webpack查看全部
-
一、babel 1、babel是一個轉換編譯器,它能將ES6轉換成可以在瀏覽器中運行的代碼 2、安裝babel 終端目標文件夾輸入：npm install --save-dev babel-loader babel-core 3、loader:'babel-loader'可以正常運行，視頻中的loader:'babel'不能正常運行。 4、babel的loader是一個非常耗時的轉換。 改善之前的時間是8260ms 二、query: ['kw??r?]查詢 presets:[pri?'sets] 三、安裝plugin的latest 終端目標文件輸入：npm install --save-dev babel-preset-latest 四、改善： （1）webpack 的api的configuration loaders的參數5個：test,exclude,include,loader,loaders （2）改善方法：exclude,include參數 例如：exclude:'./node_modules/',//node_modules是已經引用過的，已經打包過的文件，其實這里對速度沒有影響，這是告訴你如果是不相關的文件，可以用exclude include:'./src/', 1）會報錯：-configuration.module.loaders[0].exclude: The provided value "./node_modules/" is not an absolute path! 2）報錯的解決方法： exclude:__dirname+'/node_modules/',//已經引用過的，已經打包過的文件 include:__dirname+'/src/', （3）這樣初步改善后時間是1210ms 五、給loader指定參數presets 1、直接Loader后跟問號 require('url-loader?mimetype=images/png!./file.png'); 2、配置文件中跟問號 3、配置文件中用query 4、項目根目錄建立babelrc配置文件，配置文件中一個對象，對象中參數為presets. 5、config.js中指定babel，babel指定presets.查看全部
-
--modle-bind(編譯時綁定模塊)查看全部
-
Version: webpack 3.10.0 本章節主要內容： webpack 安裝 （1）進入指定目錄 （2）新建文件夾：終端輸入：mkdir webpack-demo （3）進入文件夾：終端輸入：cd webpack-demo （4）文件夾下初始化npm：終端輸入：npm init （5）全局裝webpack:終端輸入：npm install webpack -g （注：第一次運行webpack項目時，如果沒有這一步，而直接執行下一步的話，會提示錯誤：webpack: command not found） （6）文件夾中裝webpack:終端輸入：npm install webpack --save-dev (參數-g的含義是代表安裝到全局環境里面，參數--save-dev的含義是代表把你的安裝包信息寫入package.json文件的devDependencies字段中。) (7)webpack-demo文件夾下新建文件夾:mkdir src 和 mkdir dist 項目操作: (1)webpack.config.js module.exports = { entry:__dirname+'/src/script/main.js', output:{ path:__dirname+'/dist/js', filename:'bundle.js' } } ps: entry:__dirname+'/src/script/main.js' 表示打包的入口 從路徑src/script/main.js開始打包; output:表示打包后的文件放置的路徑 (2)package.json中添加內容 "webpack":"webpack --config webpack.config.js --module-bind 'css=style-loader!css-loader' --display-reasons --display-modules --progress --watch" ps: --progress打包過程 --display-module 打包模塊 --colors顯示顏色 --display-reason 打包原因查看全部
-
output:{ path:__dirname+'/dist/js', filename:'bundle.js' }查看全部
-
npm i less-loader ---save-dev查看全部
-
（接上面的3） //插件 plugins: [ new htmlWebpackPlugin({ //html打包 //filename:'index-[hash].html', //文件帶哈希 template:'index.html', //打包的html模版路徑和文件名稱 inject:'head', //js存放位置，head或body標簽內 hash:true, //避免JS緩存 title:'wabpack使用方法', //傳參,頁面上通過<%= htmlWebpackPlugin.options.title %>方式接收 date:new Date(), //傳參 minify:{ //壓縮html頁面 //removeAttributeQuotes:true, //去掉html中屬性的雙引號 removeComments:true, //刪除html中的注釋 collapseWhitespace:true //去掉空格 }, }), new htmlWebpackPlugin({ //添加多個頁面打包 filename:'a.html', template:'index.html', inject:'body', title:'this is a.html', chunks:['main','a'], //指定不同頁面引入不同的JS文件 //excludeChunks:['main'] //排除不需要引入的js }) ] };查看全部
-
（接上面的2） { //jquery文件打包 test:require.resolve('jquery'), use:[{ loader:'expose-loader',options:'jQuery' },{ loader:'expose-loader',options:'$' }] }, { //將ES6轉換為ES5 test:/\.js$/,loader:'babel-loader', options:{ //也可以在package.json文件中配置'babel':{"presets":["latest"]} presets:['env'] }, exclude: path.resolve(__dirname, 'node_modules'), //排除本目錄下的文件，減少打包時間 include: path.resolve(__dirname, 'src'), //指定src目錄下的文件 } ] },查看全部
-
前幾節課所有匯總，webpack3.0最新版本中測試正常，請大家少走彎路； const path = require('path');//引入path模塊 const htmlWebpackPlugin = require('html-webpack-plugin'); //html打包模塊 module.exports = { //入口文件路徑，可以是多個文件 entry: { main:'./src/main.js', a:'./src/a.js' }, //出口文件 output: { path: path.resolve(__dirname, 'dist'), //輸出路徑 //publicPath:'http://www.163.com/', //線上絕對地址 filename: 'js/[name].bundle.js' //輸出文件名js目錄下,[name]表示匹配原始文件名 //filename:'[name]-[chunkhash].js' //生成原文件名帶哈希 }, module:{ //功能模塊 rules:[ //{test:/\.css$/,loader:'style-loader!css-loader'}, //css打包,不添加其它參數可用 {test:/\.css$/,use: ['style-loader','css-loader', {loader:'postcss-loader',options:{ plugins:[ //安裝postcss-import插件，對@import引入的css文件處理，沒有可不安裝不添加 require('postcss-import'), require('autoprefixer') //自動處理class加前綴 ],browser:['last 5 versions']}} //對低瀏覽器版本兼容處理 ]},查看全部
-
在webpack3中可用: { test: /\.less$/, loader: [ 'style-loader', 'css-loader', { loader: 'postcss-loader', options: { plugins: [ require('autoprefixer')() ] } }, 'less-loader' ] }查看全部
-
如果運行報錯了，將模板index.html里引用的js刪掉就好了，只注釋沒用，要刪掉才行。 一、如果想用不同的模版生成不同的html文件，只用在plugins里添加各種htmlWebpackPlugin的實例就好了。 二、頁面中引入inline的script github上，ampedandwired/html-webpack-plugin/examples/inline/template.jade中可以看到代碼。 三、htmlWebpackPlugin.files.chunks.entry就是chunks輸出的地址 四、main以inline的形式引進，a,b,c以外鏈的形式引進 1、index.html中 （1）在htmlWebpackPlugin的配置中有一個有一個參數chunks可以配置。 （2）head中 <script type="text/javascript"> <%= compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %> </script> 重點：?。?！compilation.assets是webpack暴露出來可以獲取文件數據的方法。通過傳文件名路徑進這個對象，拿到這個文件的索引，通過調用source拿到文件內容。 compilation.assets需要的是不帶publicPath，htmlWebpackPlugin.files.chunks.main.entry帶publicPatch，所以用substr()截取。 （3）body中<%= htmlWebpackPlugin.files.chunks[k].entry %> （4）config.js中inject為false 五、小結 1、html和動態生成的文件一一對應。 2、htmlWebpackPlugin，如何自定義html，并且通過模板，參數如何傳參。 3、多頁面時，如何通過htmlWebpackPlugin生成多個html 4、深入探究通過htmlWebpackPlugin，結合模板的方式把生成的js，通過inline引入到html中。查看全部
舉報
0/150
提交
取消