點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

webpack4.0+vue2.0利用批處理生成前端單頁或多頁應用的方法

來源：懂視網責編：小采時間：2020-11-27 21:54:25

webpack4.0+vue2.0利用批處理生成前端單頁或多頁應用的方法

webpack4.0+vue2.0利用批處理生成前端單頁或多頁應用的方法:批處理前端現在在做項目的時候大多數遇到的都是單頁面應用，但有時需要做多頁面的時候，會把單頁拿過來修改成多頁面，如果代碼多了，對單頁或多頁的配置可能會混亂，那么有沒有更好的方式能把單頁面和多頁面不同的配置代碼分開，能更清楚的分辯他們的區別，

推薦度：

點擊下載本文 文檔為doc格式

導讀webpack4.0+vue2.0利用批處理生成前端單頁或多頁應用的方法:批處理前端現在在做項目的時候大多數遇到的都是單頁面應用，但有時需要做多頁面的時候，會把單頁拿過來修改成多頁面，如果代碼多了，對單頁或多頁的配置可能會混亂，那么有沒有更好的方式能把單頁面和多頁面不同的配置代碼分開，能更清楚的分辯他們的區別，

批處理

前端現在在做項目的時候大多數遇到的都是單頁面應用，但有時需要做多頁面的時候，會把單頁拿過來修改成多頁面，如果代碼多了，對單頁或多頁的配置可能會混亂，那么有沒有更好的方式能把單頁面和多頁面不同的配置代碼分開，能更清楚的分辯他們的區別，這里是利用 批處理 對前端構建進行部署 git地址目錄分為三塊

single //單頁代碼 
share // 共用代碼 
many //多頁代碼

只需要用到 批處理 對其中兩者進行合并就能生成想要的單頁或多頁應用，提示需要安裝國內的 npm淘寶鏡像

如果未安裝的需要自行修改build.bat里的命令行 call cnpm install 為 call npm install

如下所示：

先選擇存放路徑，輸入項目名，選擇要生成的是單頁還是多頁

這里以單頁為示例，其實就是簡單的對文件進行復制，復制完成后會自動安裝依賴

安裝完依賴后還會自動運行項目如上開啟的項目端口為8080

目錄如下

webpack4 共同配置(share)

這里用到了最新的webpack4.0，它簡化了很多配置，多線程輸出，更快的構建能力，大大提高了開發的效率

首先看下配置文件 config.js

const path = require('path'),
 config = {
 //開發環境配置
 dev: {
 port: 8080,
 // 接口代理
 proxyTable: {
 '/v2': {
 target: 'https://api.douban.com',
 changeOrigin: true
 },
 },
 },
 //生產環境配置
 build: {
 packName: 'myProjcet', //項目打包后名稱
 outputPath: '', //打包后項目

輸出路徑 templatePath: 'template.html', //html模版路徑,基于根路徑下 htmlShortPath: '/', //html文件輸出路徑, 基于outputPath resourcesPath: '', //最終打包路徑 resourcesShortPath: 'resources', //資源目錄 {packName}/resources }, switchVal: { to_rem: false, //是否開啟px轉rem to_eslint: false, //是否開啟eslint語法檢測 }, }; //輸出的目錄 config.build.outputPath = path.resolve(__dirname, '../../dist/', config.build.packName); //最終輸出目錄項目存放路徑 config.build.resourcesPath = path.join(config.build.outputPath, config.build.resourcesShortPath); module.exports = config;

這里有開發環境下的接口代理，

生產環境的目錄名稱和路徑

還有可選的是否轉換頁面字體為 rem 和 eslint 語法檢測

eslint 校驗是默認的規則校驗

它還有其它的三種通用規則

可根據自身喜好去設置

然后是 utils.js 工具方法

module.exports = {
 /***
 * 獲取src一級目錄
 */
 getFiles() {
 const files = glob.sync('src/**/'),
 arr = [];

 files.forEach((filepath) => {
 let name = filepath.split('/')[1];
 if (name) {
 arr.push(...[name]);
 }
 })

 let obj = {};
 if (arr.length) {
 [...new Set(arr)].map(item => {
 obj[`@${item}`] = path.join(__dirname, `../src/${item}`);
 })
 }

 return obj
 },
 /**
 * 多頁面命名 獲取每個多頁對應的js名命名
 * **/
 getFileName() {
 let fileName = glob.sync('src/**/index.js');
 entryArr = {};
 fileName.forEach(function(path) {
 let arr = path.split('/');
 let name = arr[arr.length - 2];
 entryArr[name] = './' + path;
 })
 return entryArr;
 },
 /***
 * 靜態目錄存放路徑
 */
 assetsPath(_path) {
 return path.posix.join(config.build.resourcesShortPath, _path);
 },
 copyDir(source, target) {
 rm('-rf', target);
 mkdir('-p', target);
 cp('-R', source, target);
 }
}

再來看在開發和生產共用的代碼 webpack.base.conf.js

首先看下一些基本的對 vue、css、js 這些loader的操作

rules: [
 { test: /\.vue$/, loader: 'vue-loader', },
 { test: /\.css$/, use: ['style-loader', 'css-loader'] },
 { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
 { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
 {
 test: /\.js$/,
 loader: !process.env.NODE_ENV ? 'happypack/loader?id=happy-babel' : 'babel-loader',
 //loader: 'babel-loader',
 exclude: /(node_modules|lib)/,
 include: [ // 表示只解析以下目錄，減少loader處理范圍
 path.resolve(__dirname, '../src'),
 ],
 },
 {
 test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
 use: [{
 loader: 'file-loader',
 options: {
 //生產環境真實路徑
 name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
 }
 }]
 },
 {
 test: /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/,
 use: {
 loader: 'url-loader',
 options: {
 limit: 10000,
 //生產環境真實路徑
 name: utils.assetsPath('image/[name].[hash:7].[ext]')
 }
 }
 },
 ]

嗯都給了注釋，要注意的是 css、less、scss 的loader順序，不要寫反因為他是從前往后這樣編譯的如果找不到前面的后面的loader也就無法執行 js 的loader用了一段這個

!process.env.NODE_ENV ? 'happypack/loader?id=happy-babel' : 'babel-loader',

因為在生產環境下打包時 js loader的編譯會很慢，所以開啟了多線程去處理 js loader的編譯

HappyPack = require('happypack'),
 os = require('os'),
 happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length }),
 //利用多線程解決js loader編譯過程耗時 除scss無法使用 css、vue都可使用 (webpack4本來就是多線程)
 createHappyPlugin = (id, loaders) => new HappyPack({
 id: id,
 loaders: loaders,
 threadPool: happyThreadPool,
 verbose: true, //允許 HappyPack

輸出日志 });

需要在 plugins 下加上下面這段

createHappyPlugin('happy-babel', [{
 loader: 'babel-loader',
 options: {
 babelrc: true,
 cacheDirectory: true // 啟用緩存
 }
}]),

happy-babel 就是找到上面loader的id,但因為webpack4本來就是多線程的，這樣做可能多此一舉，暫時沒有測試過量大時編譯效果

還有這個

new VueLoaderPlugin()

在 vue-loader 版本為15.0以后都要加上

其它在升級到webpack4.0后還是有不少的坑，

就比如4之前可用的合并加載文件

new webpack.optimize.MinChunkSizePlugin({minChunkSize: 30000}),

這個已經整合到 splitChunks 里面去了，再用的話就會沖突報錯

因為之前沒有留意用3升4的過程中沒有刪除它，所以大家要重新配置4的時候還是重新一步步配置，否則很多報錯都莫名其妙，接著往下看

if (!process.env.NODE_ENV) {
 for (let i = 1; i < 3; i++) {
 //使用mini-css-extract-plugin在生產環境要把style-loader覆蓋，它們會有沖突
 config.module.rules[i].use[0] = {
 loader: MiniCssExtractPlugin.loader,
 };
 //自動添加樣式補全放
 config.module.rules[i].use.splice(2, 0, 'postcss-loader');
 }

 //css樣式合并
 config.plugins.push(
 new MiniCssExtractPlugin({
 filename: utils.assetsPath('css/[name].[chunkhash:8].css'),
 })
 )
}

在生產環境下原來是用 ExtractTextPlugin 插件現在都改成了 MiniCssExtractPlugin

for循環里面主要是把 vue、css、less、scss 的第一個數組 style-loader 覆蓋成 MiniCssExtractPlugin 否則會有沖突，

自動添加前綴的 postcss-loader 要放到最后面，這也是執行順序的問題

在項目最外層要增加一個 postcss.config.js 內容是

module.exports = {
 plugins: [
 require('autoprefixer')({
 browsers: ['last 20 versions']
 })
 ]
}

require的是一個自動補全css前綴的插件 last 20 versions 指的是兼容主流瀏覽器最近的20個版本，當然如果想要兼容到某個瀏覽器的特定版本也可以這樣寫

'last 10 Chrome versions',
 'last 5 Firefox versions',
 'Safari >= 6', 
 'ie> 8

接下來是前面提過的 px轉rem 和 eslint 語法檢查，是否開啟和關閉是在 config.js 里設置

build.js 是這里生產打包，操作都是先清空原來的輸出目錄,復制靜態文件到輸出目錄然后打包

const spinner = ora("開始構建生產環境.....");
spinner.start();

//清空

輸出目錄 rm("-rf", config.build.outputPath); //復制static到輸出目錄 utils.copyDir("./static/*", config.build.resourcesPath); webpack(webpackConfig).run((err, stats) => { spinner.stop(); if (err) throw err; // 輸出編譯結果 process.stdout.write(stats.toString({ colors: true, modules: false, children: false, chunks: false, chunkModules: false, timings: false }) + "\n\n"); });

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

webpack4.0+vue2.0利用批處理生成前端單頁或多頁應用的方法

推薦度：

點擊下載本文 文檔為doc格式

標簽： VUE 批處理單頁

熱門焦點

国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

webpack4.0+vue2.0利用批處理生成前端單頁或多頁應用的方法

webpack4.0+vue2.0利用批處理生成前端單頁或多頁應用的方法

webpack4.0+vue2.0利用批處理生成前端單頁或多頁應用的方法

最新推薦

猜你喜歡

熱門推薦