webpack实用配置
生活随笔
收集整理的這篇文章主要介紹了
webpack实用配置
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
開(kāi)車之前，先介紹一些npm的命令：
：D
進(jìn)入D盤(pán)
mkdir webapp
創(chuàng)建webapp文件夾
cd webapp
進(jìn)入webapp文件夾
mkdir webapp && cd webapp
以上兩步創(chuàng)建和進(jìn)入文件夾可以合并為一步
npm init -y
快速生成package.json文件
npm install xxx --save-dev
//安裝模塊并加入到開(kāi)發(fā)依賴中，比如webpack
npm install xxx --save
安裝模塊并加入到生產(chǎn)依賴中，比如Jquery
npm install?xxx@2.3.0
下載指定版本
npm view webpack versions --json
如果忘記版本號(hào)，可以列出所有版本號(hào)
npm install -g cnpm --registry=https://registry.npm.taobao.org
下載淘寶鏡像源，國(guó)內(nèi)npm下載很慢，而且有些包下下來(lái)貌似會(huì)有問(wèn)題，比如node-sass。
下載之后就可以直接使用了，使用方式跟Npm一樣，只不過(guò)是改成cnpm
cls
清空命令提示符窗口內(nèi)容
webpack
1. html篇
介紹完npm基本的東西后，下面開(kāi)始擼webpack
有關(guān)webpack的基本概念建議到官網(wǎng)查看，解釋的更為清楚，下面只簡(jiǎn)單介紹。
1. 在根目錄下生成package.json文件： npm init -y 2. 安裝webapck cnpm install webpack --save-dev 3. 創(chuàng)建webpack.config.js文件： echo > webpack.config.js var path=require("path"); module.exports={ <!-- 要打包的文件 --> entry:"./index.js", output:{ <!-- 指定打包后的文件名字 --> filename:"bundle.js", <!-- 打包后的文件路徑 --> path:path.resolve(__dirname,"dist") } } 4.創(chuàng)建src目錄，并在src目錄下創(chuàng)建index.html, index.js文件并隨便輸一點(diǎn)東西 window.onload=function(){ alert(1) } 5.執(zhí)行 webpack 命令，可以發(fā)現(xiàn)webpack幫我們?cè)?span id="ozvdkddzhkzd" class="hljs-selector-tag">dist下生成了一個(gè)main.js文件,打開(kāi)main.js并拖到最下面你會(huì)發(fā)現(xiàn)index.js的內(nèi)容就在里面。 打包完之后，我們?cè)?span id="ozvdkddzhkzd" class="hljs-selector-tag">dist生成了js文件，但是我們的index.html在src下面，你可以手動(dòng)的復(fù)制src下的html文件到dist目錄下，并且將打包后的js文件引入。不過(guò)像我們這么懶的人，還是希望webpack能夠幫我們?cè)?span id="ozvdkddzhkzd" class="hljs-selector-tag">dist下也生成index.html，要是能自動(dòng)引入打包后的js文件，那就再好不過(guò)了。這時(shí)候，是時(shí)候來(lái)一發(fā)插件了。 6.cnpm install html-webpack-plugin --save-dev修改webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin'); var path = require("path") module.exports = { entry:"./index.js", output: { path: path.resolve(__dirname, 'dist'), filename:"bundle.js", }, plugins: [new HtmlWebpackPlugin({ title: "測(cè)試" })] }; 重新執(zhí)行命令 webpack ,你會(huì)發(fā)現(xiàn)在dist下多生成了一個(gè)index.html文件，打開(kāi)發(fā)現(xiàn)還有一個(gè)script的標(biāo)簽引用著我們打包后的文件，nice。不過(guò)問(wèn)題又來(lái)了，html文件很簡(jiǎn)陋，就是emmet幫我們生成的Html5文件，你可能希望還帶有更多的 meta標(biāo)簽，像這樣的 此時(shí)，你可以自己寫(xiě)一個(gè)模板，只需要告訴html-webpack-plugin插件文件的位置就可以了。修改webpack.config.js
plugins: [new htmlWebpackPlugin({ title:"首頁(yè)", <!-- 指定模板位置 --> template:'./src/index.html', <!-- 指定打包后的文件名字 --> filename: 'index.html' }) ]對(duì)于多疑癥的你，打包多次后你可能會(huì)懷疑文件修改生效了沒(méi)有，此時(shí)你可以安裝clean-webpack-plugin插件，在每次打包時(shí)，先刪除原來(lái)的dist目錄，再重新打包，這樣就可以放心的睡覺(jué)，不用擔(dān)心門(mén)沒(méi)關(guān)了。
7.cnpm install clean-webpack-plugin --save-dev plugins:[new htmlWebpackPlugin({ title:"首頁(yè)", template:'./src/index.html', filename: 'index.html' }), <!-- 每次打包前先刪除dist目錄 --> new CleanWebpackPlugin(['dist']) ]css篇
?
以往我們寫(xiě)css都是寫(xiě)好后手動(dòng)通過(guò)link引入到html,使用webpack后，你將不再需要手動(dòng)做這些操作,只需要在js文件中引入，webpack就能幫你搞定，不過(guò)需要一些loader和plugin的支持。cnpm install --save-dev css-loade style-loader
修改webpack.config.js
###為了處理css文件我們需要多配置一個(gè)module參數(shù),并使用css-loader來(lái)將css文件打包到成“字符串”到j(luò)s文件中，并使用style-loader將打包后的字符串提取出來(lái)并append<style>標(biāo)簽到head下面 var path=require("path"); var htmlWebpackPlugin=require('html-webpack-plugin'); var CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports={ entry:{ main:'./src/index.js' }, output:{ filename:"bundle.js", path:path.resolve(__dirname,'dist') }, module:{ rules:[ <!-- test檢測(cè)到以xxx結(jié)尾的東西use對(duì)應(yīng)的loader --> { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }, plugins:[ new htmlWebpackPlugin({ title:"首頁(yè)", template:'./src/index.html', filename:"index.html" }), new CleanWebpackPlugin(['dist']) ] } 哦，聽(tīng)說(shuō)你想用sass 預(yù)處理 器,那么只需要在use里加多一個(gè)sass-loader,并安裝依賴 cnpm install --save-dev sass-loader node-sass rules:[ { test: /\.scss$/, use: [ 'style-loader', 'css-loader',"sass-loader" ] } ] 什么，想要自動(dòng)補(bǔ)全瀏覽器后綴autoprefixer？沒(méi)問(wèn)題 cnpm install --save-dev postcss-loaderrules:[ { test: /\.s?css$/, use: [ { loader: "style-loader" }, { loader: "css-loader" }, { loader: 'postcss-loader', options: { plugins: [ require('autoprefixer')({ browsers: ['last 10 versions'] }) ] } }, { loader: "sass-loader" } ] } ]這里需要注意，use里面的執(zhí)行順序是倒序的 ，,webpack會(huì)以倒敘的方式處理并將處理后的結(jié)果返回給上一個(gè)loader，最后通過(guò)style-loader將文件的內(nèi)容append到head下面的style標(biāo)簽里。
教練，我還想要自動(dòng)刷新當(dāng)你修改一點(diǎn)文件后，你需要重執(zhí)行命令新編譯文件，然后刷新頁(yè)面。如果你使用過(guò)gulp的自動(dòng)刷新比如live-reload，那你也一定希望webpack也有同樣的功能，webpack-dev-server滿足你的需求并且能夠給你更多。
安裝webpack-dev-server到開(kāi)發(fā)依賴 cnpm install --save-dev webpack-dev-server <!-- 在package.json中加入： --> "scripts": { "dev": "webpack-dev-server" }通過(guò)npm run dev即可執(zhí)行創(chuàng)建一個(gè)服務(wù)器，打開(kāi)localhsot:8080
此時(shí)再修改文件，你會(huì)發(fā)現(xiàn)頁(yè)面自動(dòng)刷新了并且修改生效了，不過(guò)你看不到重新編譯后的文件在哪里，應(yīng)為webpack-dev-server將文件編譯到了內(nèi)存中 ，比起重新生成文件效率會(huì)更高，當(dāng)然只適用于開(kāi)發(fā)階段。
啟動(dòng)服務(wù)后，如果你 還想讓他自己 打開(kāi)Localhost，還想 使用模塊熱重載 ，可以加多一個(gè)配置 devServer:{open:true, hot: true,// 告訴 dev-server我們想用HMR模式 }開(kāi)發(fā)的時(shí)候我們并不在意 style這種形式，但是我們希望在生產(chǎn)環(huán)境下 css能從js文件宏分離出來(lái)，我們希望能css能跟js并行加載，而且可以避免因?yàn)镴s文件過(guò)大，加載慢而產(chǎn)生的flash of unstyle(無(wú)樣式頁(yè)面閃爍)。
使用“extract-text-webpack-plugin”插件來(lái)分離css代碼。修改webpack.config.js
cnpm install --save-dev extract-text-webpack-plugin var path=require("path"); var webpack=require('webpack'); var htmlWebpackPlugin=require('html-webpack-plugin'); var CleanWebpackPlugin = require('clean-webpack-plugin'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var extractSass = new ExtractTextPlugin({ filename: "[name].[contenthash].css", disable: process.env.NODE_ENV === "development" }); //通過(guò)設(shè)置環(huán)境變量來(lái)告訴webpack我們?cè)赿evelopment模式下不需要提取css到單獨(dú)在文件，只有當(dāng)不是development下（也即是production）才需要提取文件。 module.exports={ entry:{ main:'./src/index.js' }, output:{ filename:"bundle.js", path:path.resolve(__dirname,'dist') }, devServer:{ open:true, hot: true, <!-- 告訴 dev-server我們想用HMR模式 --> }, module:{ rules:[ { test: /\.s?css$/, use: extractSass.extract({ use: [ { loader: "css-loader" }, { loader: 'postcss-loader', options: { plugins: [ require('autoprefixer') ] } }, { loader: "sass-loader" }], fallback: "style-loader" }) } ] }, plugins:[ <!-- 使用此插件來(lái)支持熱重載 --> new webpack.HotModuleReplacementPlugin(), new htmlWebpackPlugin({ title:"首頁(yè)", template:'./src/index.html', filename:總結(jié)
以上是生活随笔為你收集整理的webpack实用配置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： java PreparedStatem
- 下一篇： 几段表单处理的JQuery代码