摘要:前言在上一篇文章中我介紹了學習前的準備工作,下面開始的學習。目標一般我們接觸到的關于的文章,都是以解讀官方文檔為主,而且是針對單頁面項目的應用。我先在假設要做一個多頁面應用,該如何去通過打包。
前言
在上一篇文章中我介紹了學習webpack前的準備工作,下面開始webpack的學習。
*創(chuàng)建webpack-demo文件夾 $ mkdir webpack-demo $ cd webpack-demo *初始化一份package.json $ npm init -y *package.json內容 { "name": "webpack-demo",//項目文件夾名字 "version": "1.0.0",//項目版本號 "description": "",//項目的簡介 "main": "index.js", "scripts": {//可以通過npm執(zhí)行的命令 npm run test "test": "echo "Error: no test specified" && exit 1" }, "keywords": [], "author": "",//作者 "license": "ISC" }
請關注package.json的內容在之后的學習中的變化。
目標一般我們接觸到的關于webpack的文章,都是以解讀webpack官方文檔為主,而且是針對單頁面項目的應用。我先在假設要做一個多頁面應用,該如何去通過webpack打包js、css。
假設js編寫采用的是es6語法,樣式采用scss,圖標采用iconfont和小圖片,頁面假設是html(實際可能是php或者jsp等)
打包思路,在src目錄下面創(chuàng)建dist文件夾,我們會根據(jù)不同頁面功能打包成獨立文件夾,其中包含對應的js和css
如下圖
多頁面應用js打包webpack安裝
$ npm install webpack --save-dev
# package.json中會出現(xiàn)下面屬性 "devDependencies": { "webpack": "^3.2.0" }
babel安裝 (因為我們采用的是es6語法,所以需要通過babel來把代碼轉換成es5代碼,從而在現(xiàn)有環(huán)境中執(zhí)行。)
$ npm install babel-loader --save-dev
$ npm install babel-core babel-preset-es2015 --save-dev
創(chuàng)建.babelrc文件并添加代碼 { "presets": ["es2015"] }
*在webpack.config.js中添加babel-loaders module: { loaders: [ { test: /.js/, loader: "babel", include: __dirname + "/src", } ], }
package.json
{ "name": "webpack-demo", "version": "1.0.0", "description": "my first webpack demo", "scripts": { "dev": "webpack" }, "author": "sun", "engines": { "node": ">= 4.0.0", "npm": ">= 3.0.0" }, "devDependencies": { "babel-core": "^6.25.0", "babel-loader": "^7.1.1", "babel-preset-es2015": "^6.24.1", "webpack": "^3.2.0" }, "repository": { "type": "git", "url": "https://github.com/xxxxxx(你的git名)/webpack-demo.git" } }
webpack.config.js
const path = require("path") const webpack = require("webpack") //to access built-in plugins const fs = require("fs") function getEntry() { var jsPath = path.resolve(__dirname, "src/js/app") var dirs = fs.readdirSync(jsPath) var matchs = [], files = {} dirs.forEach(function (item) { matchs = item.match(/(.+).js$/); if (matchs) { files[matchs[1]] = path.resolve(__dirname, "src/js/app", item) } }) return files } module.exports = { entry: getEntry(), output: { path: path.join(__dirname, "src/dist"), //文件輸出目錄 publicPath: "src/dist", //用于配置文件發(fā)布路徑,如CDN或本地服務器 filename: "[name]/[name].js", //根據(jù)入口文件輸出的對應多個文件名 }, module: { loaders: [ { test: /.js/, loader: "babel-loader", include: __dirname + "/src/js" //include設置只轉碼src/js下的js文件,不希望被轉碼的第三方js庫可以放在該目錄外 } ] } }
下面我們開始打包js代碼
$ npm run dev - 執(zhí)行后src/js/app下面的所有js會被分別打包到/src/js/dist下面,并且保持文件名不變,你會發(fā)現(xiàn)此時打包后的js不是壓縮后的代碼,如果需要壓縮代碼,需要在webpack.config.js中加入: plugins: [ //js文件的壓縮 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ]
下一章學習多頁面scss打包
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/112228.html
摘要:前言在上一篇文章中我介紹了學習前的準備工作,下面開始的學習。目標一般我們接觸到的關于的文章,都是以解讀官方文檔為主,而且是針對單頁面項目的應用。我先在假設要做一個多頁面應用,該如何去通過打包。 前言 在上一篇文章中我介紹了學習webpack前的準備工作,下面開始webpack的學習。 *創(chuàng)建webpack-demo文件夾 $ mkdir webpack-demo $ cd webpac...
摘要:引言最近在學習,發(fā)現(xiàn)好多知識點,之前一點都沒有接觸過,如等等。使用本地安裝,會存于文件夾內與屬性內,更方便項目文件遷移以及協(xié)同開發(fā)等情況。 引言 最近在學習webpack,發(fā)現(xiàn)好多知識點,之前一點都沒有接觸過,如babel、core-js、browserslist等等。以前習慣了使用cli構建項目,很多東西不用考慮,拿來就用,這樣的碼農是不會有能力提升的,必須了解更多的知識點,才能成為...
摘要:例如現(xiàn)在的入門學習手記系列。收到粉絲留言和打賞的喜悅。安裝上一篇入門學習手記一,主要是介紹了的核心概念,是整個學習過程的基礎知識。新生成的類似如下入門學習手記因為生成的內容過多,我直接省略掉了。 showImg(https://segmentfault.com/img/bVbk5Nd?w=1150&h=599); 本人微信公眾號:前端修煉之路,歡迎關注。 最近開始想要維護一個個人的公眾...
前言 上一篇文章我們講了多頁面js的打包,本篇文章我們繼續(xù)scss的打包。 多頁面css單獨打包 首先,我們css編寫采用的是sass,所以我們先來安裝sass-loader以及可以用到的依賴 $ npm install sass-loader node-sass css-loader style-loader --save-dev 安裝完loaders,下面在webpack.config.js...
閱讀 2968·2023-04-25 19:45
閱讀 2690·2021-11-19 09:40
閱讀 690·2021-10-14 09:49
閱讀 2668·2021-09-30 09:47
閱讀 2201·2021-09-26 09:55
閱讀 1220·2021-09-22 16:01
閱讀 2809·2019-08-30 14:19
閱讀 706·2019-08-29 16:44