国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

如何打造一個(gè)令人愉悅的前端開發(fā)環(huán)境(二)

Lowky / 2584人閱讀

摘要:解析不同文件使用哪些,這個(gè)比較簡單,很多文章都有,就不多說了,注意的是,這里的可以換成你自己的預(yù)編譯器,例如等,或者直接用都行,當(dāng)然還可以用一種通用方法,后面補(bǔ)上。

前情提要

上一篇文章介紹了目前前端比較流行的各種編輯器,以及各種流行的打包方式,最后給了一個(gè)Gulp的例子,這個(gè)例子還是14年的時(shí)候?qū)懙模€有一些可以優(yōu)化的空間,就不討論了,這篇文章主要講目前火熱的打包構(gòu)建方式--Webpack的使用方式。

主菜--沒有開胃湯

其實(shí)Webpack的入門指導(dǎo)文章非常多,配置方式也各有各樣,這里我推薦題葉大神的入門級指南--Webpack 入門指迷,如果不知道Webpack是什么或者不是很清楚各項(xiàng)配置含義的開發(fā)者,可以看此文章掃掃盲。畢竟我這篇文章并不是特別基礎(chǔ)。

一、base.js
var path = require("path")
var baseConfig = {
    resolve: {
        extensions: ["", ".js"],
        fallback: [path.join(__dirname, "../node_modules")],
        alias: {
            "src": path.resolve(__dirname, "../src"),
            "assets": path.resolve(__dirname, "../src/assets"),
            "components": path.resolve(__dirname, "../src/components")
        }
    },
    module: {
        loaders: [{
            test: /.js$/,
            loader: "babel",
            exclude: /node_modules/
        }, {
            test: /.(png|jpe?g|gif|svg|woff2?|eot|ttf|otf)(?.*)?$/,
            loader: "url?limit=8192&context=client&name=[path][name].[hash:7].[ext]"
        },
        {
            test: /.css$/,
            loader: "style!css!autoprefixer",
        },
        {
            test: /.scss$/,
            loader: "style!css!autoprefixer!sass"
        }]
    }
};

module.exports = baseConfig;

解讀下這個(gè)基本配置:

1、resolve 解析模塊依賴的時(shí)候,受影響的配置項(xiàng)。

extensions 決定了哪些文件后綴在引用的時(shí)候可以省略點(diǎn),Webpack幫助你補(bǔ)全名稱。

fallback 當(dāng)webpack在 root(默認(rèn)當(dāng)前文件夾,配置時(shí)要絕對路徑) 和 modulesDirectories(默認(rèn)當(dāng)前文件夾,相對路徑)配置下面找不到相關(guān)modules,去哪個(gè)文件夾下找modules

alias 這個(gè)大家應(yīng)該比較熟悉,requirejs之類的都有,就是別名,幫助你快速指向文件路徑,少寫不少代碼,而且不用關(guān)心層級關(guān)系,需要注意的是:在scss之類的css預(yù)編譯中引用要加上~,以便于讓loader識別是別名引用路徑。

2、module 解析不同文件使用哪些loader,這個(gè)比較簡單,很多文章都有,就不多說了,注意的是,這里的scss可以換成你自己的預(yù)編譯器,例如:sass、less、stylus等,或者直接用postcss都行,當(dāng)然還可以用一種通用方法,后面補(bǔ)上。

二、開發(fā)環(huán)境配置--config
var webpack = require("webpack");
var path = require("path")
var merge = require("webpack-merge")
var baseConfig = require("./webpack.base")
var getEntries = require("./getEntries")

var hotMiddlewareScript = "webpack-hot-middleware/client?reload=true";

var assetsInsert = require("./assetsInsert")

module.exports = merge(baseConfig, {
  entry: getEntries(hotMiddlewareScript),
  devtool: "#eval-source-map",
  output: {
    filename: "./[name].[hash].js",
    path: path.resolve("./dist"),
    publicPath:"./dist"
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: ""development""
      }
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new assetsInsert()
  ]
})

說說這個(gè)配置中的一些難點(diǎn):

1、getEntries 是用來配置入口文件,一般很多人是自己手寫,或者SPA頁面,只有一個(gè)入口, 很容易就寫出來,但是公司中,很多情況,是需要多入口,也就是多路由的Url,這個(gè)時(shí)候入口的配置就比較麻煩,我這里是放多帶帶一個(gè)文件里面配置,我們公司是靠規(guī)定來執(zhí)行,也就是一個(gè)文件夾所有的main.js都認(rèn)為是入口文件,其他都忽略。

function getEntry(hotMiddlewareScript) {
    var pattern = paths.dev.js + "project/**/main.js";
    var array = glob.sync(pattern);
    var newObj = {};

    array.map(function(el){
        var reg = new RegExp("project/(.*)/main.js","g");
        reg.test(el);
        if (hotMiddlewareScript) {
            newObj[RegExp.$1] = [el, hotMiddlewareScript];
        } else {
            newObj[RegExp.$1] = el;
        }
    });
    return newObj;
}

2、assetsInsert 是用來做模板替換的,一個(gè)小插件把template里面的值替換成打包后的css或者js。

三、打包環(huán)境配置--production
var webpack = require("webpack");
var path = require("path")
var merge = require("webpack-merge")
var baseConfig = require("./webpack.base")
var getEntries = require("./getEntries")
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var assetsInsert = require("./assetsInsert")

var productionConf = merge(baseConfig, {
    entry: getEntries(),
    output: {
        filename: "./[name].[hash].js",
        path: path.resolve("./public/dist"),
        publicPath: "./"
    },
    plugins: [
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: ""production""
            }
        }),
        new ExtractTextPlugin("./[name].[hash].css", {
            allChunks: true
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new webpack.optimize.OccurenceOrderPlugin(),
        new assetsInsert()
    ]
})

productionConf.module.loaders = [
             {
                test: /.js$/,
                loader: "babel",
                exclude: /node_modules/
            }, {
                test: /.(png|jpe?g|gif|svg|woff2?|eot|ttf|otf)(?.*)?$/,
                loader: "url?limit=8192&context=client&name=[path][name].[hash:7].[ext]"
            },
            {
                test: /.css$/,
                loader: ExtractTextPlugin.extract("style", "css"),
            },
            {
                test: /.scss$/,
                loader: ExtractTextPlugin.extract("style", "css!sass")
            }]

module.exports = productionConf

基本跟開發(fā)的差不多,差別在于:
1、使用ExtractTextPlugin 來打包c(diǎn)ss,所以要干掉原來base的loaders,重新寫了一個(gè),在最下面。

2、UglifyJsPlugin 給js壓縮代碼。其他沒有什么好解釋的了,一樣的。

四、構(gòu)建命令
require("shelljs/global")
env.NODE_ENV = "production"
var ora = require("ora")
var webpack = require("webpack")
var webpackConfig = require("./webpack.production.config")

var spinner = ora("building for production...")
spinner.start()

var staticPath = __dirname + "/../public/dist/"
rm("-rf", staticPath)
mkdir("-p", staticPath)

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
  }) + "
")
})

寫一個(gè)build.js,然后在package.json里面添加 script 參數(shù)

"build": "node build.js"http://這里記得寫自己build.js路徑

甜點(diǎn)(馬卡龍)--有點(diǎn)膩

上面的配置是可以更改的,例如你在loaders 里面加上

{
  test: /.vue$/,
  loader: "vue"
}

就可以變成支持.vue文件的vuejs打包構(gòu)建,同理,修改下支持jsx,和添加一些reactjs的module,就可以用來跑Reactjs的東西。

還有可以隨意更改Css預(yù)編譯器的類型,用你自己喜歡就行,或者跟我們前面提到的方法,把所有類型都配置上,

var path = require("path")
var config = require("../config")
var ExtractTextPlugin = require("extract-text-webpack-plugin")

exports.assetsPath = function (_path) {
  return path.posix.join(config.build.assetsSubDirectory, _path)
}

exports.cssLoaders = function (options) {
  options = options || {}
  // generate loader string to be used with extract text plugin
  function generateLoaders (loaders) {
    var sourceLoader = loaders.map(function (loader) {
      var extraParamChar
      if (/?/.test(loader)) {
        loader = loader.replace(/?/, "-loader?")
        extraParamChar = "&"
      } else {
        loader = loader + "-loader"
        extraParamChar = "?"
      }
      return loader + (options.sourceMap ? extraParamChar + "sourceMap" : "")
    }).join("!")

    if (options.extract) {
      return ExtractTextPlugin.extract("vue-style-loader", sourceLoader)
    } else {
      return ["vue-style-loader", sourceLoader].join("!")
    }
  }

  // http://vuejs.github.io/vue-loader/configurations/extract-css.html
  return {
    css: generateLoaders(["css"]),
    postcss: generateLoaders(["css"]),
    less: generateLoaders(["css", "less"]),
    sass: generateLoaders(["css", "sass?indentedSyntax"]),
    scss: generateLoaders(["css", "sass"]),
    stylus: generateLoaders(["css", "stylus"]),
    styl: generateLoaders(["css", "stylus"])
  }
}

// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
  var output = []
  var loaders = exports.cssLoaders(options)
  for (var extension in loaders) {
    var loader = loaders[extension]
    output.push({
      test: new RegExp("." + extension + "$"),
      loader: loader
    })
  }
  return output
}

這就是把所有的css預(yù)編譯的都加到配置里面了。

總結(jié)下--買單啦

Webpack多種多樣,就算一個(gè)loaders都有好幾種不同的配置,讓人很是頭疼,最關(guān)鍵的是很多插件自己的文檔也不清不楚,弄得大家都很迷茫,我的經(jīng)驗(yàn)就是多試多測,自己多寫一寫,看命令行打印的錯誤,去找原因,不要一看到報(bào)錯就慌了,很多新手最容易犯錯就是一看到報(bào)錯就懷疑人生了,一定要看報(bào)錯記錄,一般都有提示,按照提示去解決相應(yīng)問題就好啦。

下一章我們講Nodejs的東東。

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/49972.html

相關(guān)文章

  • 如何打造一個(gè)令人愉悅前端開發(fā)環(huán)境(三)

    摘要:的最后一個(gè)大招就是替換一些傳統(tǒng)的服務(wù)端語言,例如,,等,在業(yè)務(wù)層上面使用來開發(fā)服務(wù)端完全不成問題。更多的的使用細(xì)節(jié)和技巧建議關(guān)注美團(tuán)博客大搜車論壇下一篇我們開啟如何結(jié)合和搭建一個(gè)開發(fā)環(huán)境和項(xiàng)目目錄 往期回顧 前面2期都講得是瀏覽器端的東西比較多,包括Webpack,雖然是Node處理的,但是還是瀏覽器端用的多,對于現(xiàn)在的前端開發(fā)來說,不懂一點(diǎn)服務(wù)端的東西,簡直沒辦法活,一般的招聘要求都...

    cgh1999520 評論0 收藏0
  • 如何打造一個(gè)令人愉悅前端開發(fā)環(huán)境

    摘要:解析不同文件使用哪些,這個(gè)比較簡單,很多文章都有,就不多說了,注意的是,這里的可以換成你自己的預(yù)編譯器,例如等,或者直接用都行,當(dāng)然還可以用一種通用方法,后面補(bǔ)上。 前情提要 上一篇文章介紹了目前前端比較流行的各種編輯器,以及各種流行的打包方式,最后給了一個(gè)Gulp的例子,這個(gè)例子還是14年的時(shí)候?qū)懙模€有一些可以優(yōu)化的空間,就不討論了,這篇文章主要講目前火熱的打包構(gòu)建方式--Webp...

    Object 評論0 收藏0
  • 如何打造一個(gè)令人愉悅前端開發(fā)環(huán)境(一)

    摘要:我覺得這方面的原因是當(dāng)時(shí)對和的依賴,導(dǎo)致大家對的興趣不弄,錯過了最佳時(shí)機(jī),這個(gè)其實(shí)跟百度自己的的技術(shù)棧有很大關(guān)系。這個(gè)阮一峰對于前端構(gòu)建的變化吐槽過,說新的構(gòu)建工具就是的構(gòu)建工具。 文章來源 最近幾年,前端發(fā)展越來越迅速,各種萌新加入了前端這個(gè)大家庭,大有趕IOS、超Android的趨勢呀!同時(shí),萌新們提出了各種前端工作問題,除了最基礎(chǔ)的html、css、js三板斧之外,最讓人頭疼的應(yīng)...

    KavenFan 評論0 收藏0
  • 如何打造一個(gè)令人愉悅前端開發(fā)環(huán)境(一)

    摘要:我覺得這方面的原因是當(dāng)時(shí)對和的依賴,導(dǎo)致大家對的興趣不弄,錯過了最佳時(shí)機(jī),這個(gè)其實(shí)跟百度自己的的技術(shù)棧有很大關(guān)系。這個(gè)阮一峰對于前端構(gòu)建的變化吐槽過,說新的構(gòu)建工具就是的構(gòu)建工具。 文章來源 最近幾年,前端發(fā)展越來越迅速,各種萌新加入了前端這個(gè)大家庭,大有趕IOS、超Android的趨勢呀!同時(shí),萌新們提出了各種前端工作問題,除了最基礎(chǔ)的html、css、js三板斧之外,最讓人頭疼的應(yīng)...

    Yangyang 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<