摘要:配置文件的編寫在目錄下。當然可以根據其他的解析搭建不同開發環境,都是很容易的。
前言
自從webpack 誕生,就開啟了webpack的時代,從其他的老大哥打包工具過度而來,詳情可看: https://github.com/tstrilogy/...
0. 資源list of loader: https://webpack.github.io/doc... (關于webpack 所有資源的loader 列表)
webpack doc: https://doc.webpack-china.org/ (webpack的中文文檔)
本機安裝環境:
系統: macos nodejs: nodejs8.5 npm: 5.3
上面是系統的搭建開發模板的系統環境。
2. 配置目錄及文件{ "name": "handlerbase-template", "version": "1.0.0", "description": "use handlebars", "author": "longfan.zheng", "private": true, "scripts": { "dev": "node build/dev.server.js", "build": "node build/build.js" }, "dependencies": { "bootstrap": "^3.3.7", "jquery": "^3.2.1" }, "devDependencies": { "autoprefixer": "^6.7.2", "babel-core": "^6.22.1", "babel-loader": "^6.2.10", "babel-plugin-transform-runtime": "^6.22.0", "babel-preset-env": "^1.2.1", "babel-preset-stage-2": "^6.22.0", "babel-register": "^6.22.0", "chalk": "^1.1.3", "compression-webpack-plugin": "^1.0.0", "connect-history-api-fallback": "^1.3.0", "copy-webpack-plugin": "^4.0.1", "css-loader": "^0.26.1", "eslint-friendly-formatter": "^3.0.0", "eventsource-polyfill": "^0.9.6", "express": "^4.14.1", "extract-text-webpack-plugin": "^2.0.0", "file-loader": "^0.10.0", "friendly-errors-webpack-plugin": "^1.1.3", "function-bind": "^1.1.0", "handlebars": "^4.0.10", "handlebars-loader": "^1.6.0", "handlebars-template-loader": "^0.8.0", "html-webpack-plugin": "^2.28.0", "http-proxy-middleware": "^0.17.3", "node-sass": "^4.5.3", "opn": "^4.0.2", "optimize-css-assets-webpack-plugin": "^1.3.0", "ora": "^1.1.0", "rimraf": "^2.6.0", "sass-loader": "^6.0.6", "semver": "^5.3.0", "style-loader": "^0.18.2", "url-loader": "^0.5.7", "webpack": "^2.2.1", "webpack-bundle-analyzer": "^2.9.0", "webpack-dev-middleware": "^1.10.0", "webpack-hot-middleware": "^2.16.1", "webpack-merge": "^2.6.1" }, "engines": { "node": ">= 4.0.0", "npm": ">= 3.0.0" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] }
上面是關于開發環境的package.json的基本內容,關于依賴就是jquery,bootstrap.其他的開發依賴等待稍后配置說明.
3. 詳細配置 根據package.json進行安裝:$ npm install
或者
$ yarn
安裝好配置準備如下目錄:
目錄說明以及文件說明:|- build 腳本文件位置 |- config 配置文件 |- dist 打包后的文件 |- node_modules node模塊 |- src 源碼文件 |- static 靜態資源(這個是直接復制到打包目錄的) |- .gitignore git忽略文件目錄 |- home.html 普通html文件 |- home.js html入口js文件 |- index.html 同上 |- index.js 同上 |- package.json |- package-lock.json |- readme.md
文件目錄配置如上說明如上。
配置文件的編寫 在config 目錄下。 公共配置文件 index.js文件const path = require("path") const fs = require("fs") let htmls = fs.readdirSync(path.resolve(__dirname, "..")) .filter(cv => cv.endsWith(".html")) // 得到root目錄下的所有html文件 const suffix = ".vm" // 定義打包后的文件后綴 const files = {} // 定義輸出文件的對象 htmls = htmls.map(function (html) { const name = html.split(".")[0] files[name] = path.resolve(__dirname, "../dist", name + suffix) }) // 得到輸出文件的名稱以及路徑 module.exports = { build: Object.assign({ env: require("./prod.env"), assetsRoot: path.resolve(__dirname, "../dist"), assetsSubDirectory: "static", // 定義靜態資源的子目錄 assetsPublicPath: "/", // 定義資源的路徑 productionSourceMap: true, // 定義產品環境開啟sourceMap productionGzip: true, // 開啟產品環境gzip 壓縮 productionGizpExtensions: ["js", "css"], // 定義產品環境gzip壓縮的后綴 bundleAnlyzerReport: false //關閉打包后自動打開打包分析報告 }, files), // 打包文件的內容 dev: { env: require("./dev.env"), port: 8080, // 定義開發服務器的端口 autoOpenBrowser: true, // 定義是否自動打開瀏覽器 assetsSubDirectory: "static", // 定義資源子目錄和build的key 定義一樣 assetsPublicPath: "/", // 同上 proxyTable: {}, // 代理配置 cssSourceMap: false // 關閉cssSourceMap } // 開發配置項 }
開發文件dev.env.js和prod.env.js 編寫說明: 最后打包出來的文件需要使用volcityjs模板引擎來進行服務器渲染,so 打包的文件最后的即為是xxx.vm文件。需要當前的nodejs 環境支持array.filter方法以及array.map方法
dev.env.js
const merge = require("webpack-merge") // webpack 配置文件合并的模塊 const proEnv = require("./prod.env") // 請求產品環境的環境變量 module.exports = merge(proEnv, { NODE_ENV: ""development"" }) // 覆蓋NODE_ENV的值
prod.env.js
module.exports = { NODE_ENV: ""production"" } // 定義產品環境的NODE_ENV
上面就就定義好了開發的配置文件,主要是關于打包配置項以及開發配置項的定義。
開始編寫build目錄下的打包腳本以及webpack的配置文件。 webpack 配置文件webpack.base.conf.js (基本的webpack 配置文件)
const path = require("path") const config = require("../config") // 獲取index.js const fs = require("fs") const webpack = require("webpack") function resolve (dir) { return path.join(__dirname, "..", dir) } // 解析根目錄的方法,返回一個絕對路徑 function assetsPath (_path) { var assetsSubDirectory = process.env.NODE_ENV === "production" ? config.build.assetsSubDirectory : config.dev.assetsSubDirectory return path.posix.join(assetsSubDirectory, _path) } // 通過當前NODE_ENV得到資源路徑 const prefix = "./" // 定義路徑淺醉 let jsFiles = fs.readdirSync(path.resolve(__dirname, "..")) .filter(function (cv) { return cv.endsWith(".js") }) // 得到入口文件,在根目錄的js的文件,該項目中就是home.js和index.js let entries = {} jsFiles.map(function (cv) { const name = cv.split(".")[0] entries[name] = prefix + cv return cv }) // 得到一個{ "home": "home.js", ...}這樣的對象 module.exports = { entry: entries, // 配置入口文件 output: { path: config.build.assetsRoot, filename: "[name].js", publicPath: process.env.NODE_ENV === "production" ? config.build.assetsPublicPath : config.dev.assetsPublicPath }, // 配置輸出 resolve: { extensions: [".js", ".hbs", ".json"], alias: {} }, // 配置require.resolve的解析,可以直接使用require("main.js")或者require("main.hbs")或者require("main.json")都可以省略后綴 devtool: "source-map", module: { rules: [ // 配置loader { test: /.js$/, loader: "eslint-loader", enforce: "pre", include: [resolve("src")], options: { formatter: require("eslint-friendly-formatter") } }, { test: /.hbs$/, // 在這里配置了hbs后綴的文件解析。 loader: "handlebars-loader", query: {} }, { test: /.js$/, loader: "babel-loader", include: [resolve("src")] }, { test: /.(png|jpe?g|gif|svg)(?.*)?$/, loader: "url-loader", options: { limit: 10000, name: assetsPath("img/[name].[hash:7].[ext]") } }, { test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/, loader: "url-loader", options: { limit: 10000, name: assetsPath("media/[name].[hash:7].[ext]") } }, { test: /.(woff2?|eot|ttf|otf)(?.*)?$/, loader: "url-loader", options: { limit: 10000, name: assetsPath("fonts/[name].[hash:7].[ext]") } }, { test: /.(css|scss)$/, // 這里配置sass的解析。 use: [ { loader: "style-loader" }, { loader: "css-loader", options: { sourceMap: true } }, { loader: "sass-loader", options: { sourceMap: true } } ] } ] }, plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ] // 這里定義了jquery可以直接在整個項目中使用$或者jQuery,不需要定義 }
webpack.dev.conf.js
const webpack = require("webpack") const path = require("path") const merge = require("webpack-merge") const config = require("../config") const baseWebpackConfig = require("./webpack.base.conf") // 導入base const HtmlWebpackPlugin = require("html-webpack-plugin") // 導入html 解析的webpack的插件 const FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin") // 導入友好的錯誤提示的插件 const fs = require("fs") Object.keys(baseWebpackConfig.entry).forEach(function (name) { baseWebpackConfig.entry[name] = ["./build/dev.client"].concat( baseWebpackConfig.entry[name]) }) // 自動讀取在根目錄下的html文件,并使用webpack的插件進行解析 let htmls = fs.readdirSync(path.resolve(__dirname, "..")) .filter(cv => cv.endsWith(".html")) const prefix = "./" htmls = htmls.map(function (html) { return new HtmlWebpackPlugin({ filename: prefix + html, template: prefix + html, inject: true, chunks: [html.split(".")[0]] }) }) // 得到一個HtmlWebpackPlugin 的對象,具體配置看webpack-html-plugin主頁 module.exports = merge(baseWebpackConfig, { devtool: "#cheap-module-eval-source-map", plugins: [ new webpack.DefinePlugin({ "process.env": config.dev.env }), new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin(), new FriendlyErrorsPlugin() ].concat(htmls) }) // 通過webpack-merge 合并配置文件
webpack.prod.conf.js
const path = require("path") const webpack = require("webpack") const config = require("../config") const merge = require("webpack-merge") const baseWebpackConfig = require("./webpack.base.conf") const CopyWebpackPlugin = require("copy-webpack-plugin") const HtmlWebpackPlugin = require("html-webpack-plugin") const ExtractTextPlugin = require("extract-text-webpack-plugin") const OptimizeCssPlugin = require("optimize-css-assets-webpack-plugin") const fs = require("fs") const env = process.env.NODE_ENV === "testing" ? require("../config/test.env") : config.build.env function assetsPath (_path) { var assetsSubDirectory = process.env.NODE_ENV === "production" ? config.build.assetsSubDirectory : config.dev.assetsSubDirectory return path.posix.join(assetsSubDirectory, _path) } let htmls = fs.readdirSync(path.resolve(__dirname, "..")) .filter(cv => cv.endsWith(".html")) const prefix = "./" htmls = htmls.map(function (html) { const name = html.split(".")[0] return new HtmlWebpackPlugin({ filename: config.build[name], template: prefix + html, inject: true, chunks: [name, "vendor", "manifest"], minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: "dependency" }) }) const webpackConfig = merge(baseWebpackConfig, { devtool: config.build.productionSourceMap ? "#source-map" : false, output: { path: config.build.assetsRoot, filename: assetsPath("js/[name].[chunkhash].js"), chunkFilename: assetsPath("js/[id].[chunkhash].js") }, plugins: [ new webpack.DefinePlugin({ "process.env": env }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false }, sourceMap: true }), new webpack.optimize.CommonsChunkPlugin({ name: "vendor", minChunks: function (module, count) { return ( module.resource && /.js$/.test(module.resource) && module.resource.indexOf( path.join(__dirname, "../node_modules") ) === 0) } }), new webpack.optimize.CommonsChunkPlugin({ name: "manifest", chunks: ["vendor"] }), new CopyWebpackPlugin([ { from: path.resolve(__dirname, "../static"), to: config.build.assetsSubDirectory, ignore: [".*"] } ]) ].concat(htmls) }) if (config.build.productionGzip) { const CompressionWebpackPlugin = require("compression-webpack-plugin") webpackConfig.plugins.push( new CompressionWebpackPlugin({ asset: "[path].gz[query]", algorithm: "gzip", test: new RegExp(( ".(" + config.build.productionGizpExtensions.join("|") + ")$" )), threshold: 10240, minRatio: 0.8 }) ) } if (config.build.bundleAnlyzerReport) { const BundleAnalyzerPlugin = require( "webpack-bundle-analyzer").BundleAnalyzerPlugin webpackConfig.plugins.push(new BundleAnalyzerPlugin()) } module.exports = webpackConfig
開發環境的打包文件主要是開啟壓縮功能,可以將node_modules的文件打包一個文件,以及開啟壓縮等等.
編寫開發服務器腳本
const config = require("../config") if (!process.env.NODE_ENV) { process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) } const opn = require("opn") const path = require("path") const express = require("express") const webpack = require("webpack") const proxyMiddleware = require("http-proxy-middleware") const webpackConfig = process.env.NODE_ENV === "testing" ? require( "./webpack.prod.conf") : require("./webpack.dev.conf") const port = process.env.PORT || config.dev.port const autoOpenBrowser = !!config.dev.autoOpenBrowser const proxyTable = config.dev.proxyTable const app = express() const complier = webpack(webpackConfig) const devMiddleware = require("webpack-dev-middleware")(complier, { publicPath: webpackConfig.output.publicPath, quiet: true, noInfo: false }) // 開啟開發中間件 const hotMiddleware = require("webpack-hot-middleware")(complier, { log: () => console.log, heartbeat: 2000 }) // 開啟熱更新 complier.plugin("compilation", function (compilation) { compilation.plugin("html-webpack-plugin-after-emit", function (data, cb) { hotMiddleware.publish({action: "reloadd"}) cb() }) }) Object.keys(proxyTable).forEach(function (context) { const options = proxyTable[context] if (typeof options === "string") { options = {target: options} } app.use(proxyMiddleware(options.filter || context, options)) }) app.use(require("connect-history-api-fallback")()) // 攔截get請求 app.use(devMiddleware) app.use(hotMiddleware) const staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) app.use(staticPath, express.static("./static")) // 設置靜態資源目錄和上訴config目錄中配置一樣 const uri = "http://localhost:" + port let _resolve const readyPromise = new Promise(resolve => { _resolve = resolve }) console.log("> Starting dev server...") devMiddleware.waitUntilValid(() => { console.log("> Listening at " + uri + " ") if (autoOpenBrowser && process.env.NODE_ENV !== "test") { opn(uri) } _resolve() }) const server = app.listen(port) module.exports = { ready: readyPromise, close: () => { server.close() } }
編寫客戶端熱更新模塊:
require("eventsource-polyfill") const hotClient = require( "webpack-hot-middleware/client?noInfo=true&reload=true") hotClient.subscribe(function (event) { // console.log("[hot client]", event.action) if (event.action === "reload") { window.loaction.reload() } })
這里主要是使用webpack-hot-middleware的語法,然后根據監聽時間刷新頁面
編寫打包腳本build.js
process.env.NODE_ENV = "production" const ora = require("ora") // 控制臺的等待的控制器 const rm = require("rimraf") // 刪除文件 const path = require("path") const chalk = require("chalk") // 控制臺有顏色輸出 const webpack = require("webpack") const config = require("../config") const webpackConfig = require("./webpack.prod.conf") const spinner = ora("building for production...") spinner.start() rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), function (err) { if (err) throw err webpack(webpackConfig, function (err, stats) { spinner.stop() if (err) throw err process.stdout.write(stats.toString({ colors: true, modules: false, children: false, chunks: false, chunkModules: false }) + " ") console.log(chalk.cyan(" Build complete. ")) console.log(chalk.yellow( " Tip: built files are meant to be served over an HTTP server. " + " Opening index.html over file:// won"t work. " )) }) })
詳細請看源碼注釋以及文件后面的備注. 源碼請移步: https://github.com/tstrilogy/...(歡迎提issue和點star)
4. 完成效果打包后生成的文件:
顯示效果:
都可以寫出hbs文件重復使用.
5. 擴展webpack是一個強大的打包工具,上面的配置文件是依據vue-webpack的配置文件,去除了vue的,改寫成一個僅僅使用handlebars和jquery以及bootstrap的開發模板。當然可以根據其他的解析loader搭建不同開發環境,都是很容易的。
本文完.
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/88899.html
摘要:前言這里筑夢師是一名正在努力學習的開發工程師目前致力于全棧方向的學習希望可以和大家一起交流技術共同進步用簡書記錄下自己的學習歷程個人學習方法分享本文目錄更新說明目錄學習方法學習態度全棧開發學習路線很長知識拓展很長在這里收取很多人的建議以后決 前言 這里筑夢師,是一名正在努力學習的iOS開發工程師,目前致力于全棧方向的學習,希望可以和大家一起交流技術,共同進步,用簡書記錄下自己的學習歷程...
閱讀 2436·2019-08-30 15:52
閱讀 2237·2019-08-30 12:51
閱讀 2833·2019-08-29 18:41
閱讀 2812·2019-08-29 17:04
閱讀 811·2019-08-29 15:11
閱讀 1720·2019-08-28 18:02
閱讀 3603·2019-08-26 10:22
閱讀 2510·2019-08-26 10:12