1.如何解決使用基于express框架搭建的node前端服務(wù)器調(diào)用接口時(shí)的跨域問(wèn)題？

使用npm提供的 http-proxy-middleware 插件可以很方便的處理跨域請(qǐng)求。比如某個(gè)api文件夾下的接口全部重定向到 "http://xxx.com" 的域名下。具體使用方法如下：

var express = require('express');
var proxy = require('http-proxy-middleware');

const app = express();

app.use(express.static(__dirname + '../api'),proxy({
    target: 'http://xxx.com',
    changeOrigin: true
}));

2.如何打包jquery、jquery插件、以及其他的一些第三方類(lèi)庫(kù)？

打包jquery不能像其他第三方類(lèi)庫(kù)一樣打包進(jìn)vendor，因?yàn)槟承﹋query插件依賴(lài)于jquery，所以在引用的時(shí)候會(huì)導(dǎo)致"$ is undefined"這類(lèi)情況。較好的做法是通過(guò)引用expose-loader去解決問(wèn)題。具體代碼如下：

module: {
    rules: [
        {
           test: require.resolve('jquery'),
           use: 'expose-loader?jQuery!expose-loader?$'
        }
    ]
}

js直接引用jquery及相應(yīng)的jquery插件，即可使用

import $ from 'expose-loader?!jquery'
import bootstrap from '../common/js/bootstrap.min.js'

而對(duì)于一些全局引用的第三方類(lèi)庫(kù)，建議還是打包成一個(gè)vendor.js的文件，相關(guān)配置項(xiàng)如下：

entry: {
    "vendor": ['fontSize','artTemplate']
}

resolve: {
    extensions: ['.js'],
    alias: {
        'fontSize':path.resolve(__dirname,'../src/common/js/public/fontSize.js'),
        'artTemplate':path.resolve(__dirname,'../src/common/js/public/art-template.js')
    }
}

將所有第三方類(lèi)庫(kù)打包到一個(gè)vendor.js并輸出到預(yù)期路徑，值得注意的是輸出的filename帶上hash的話可以讓hot-middle-ware組件識(shí)別，從而達(dá)到熱更新的效果，所以建議帶上

new webpack.optimize.CommonsChunkPlugin({
    names: ['vendor'],
    filename: 'common/[name][hash].js'
})

3.引入中文字體文件過(guò)大，導(dǎo)致頁(yè)面加載過(guò)慢的問(wèn)題

在我們開(kāi)發(fā)的時(shí)候，實(shí)際拿到的頁(yè)面很多的字體效果都不是手機(jī)默認(rèn)的字體，但是由于中華文化博大精深，一個(gè)中文字體文件搞下來(lái)就好幾M，打開(kāi)個(gè)頁(yè)面卡得是生活不能自理。解決方案是用到npm提供的一個(gè)叫font-spider的插件。原理是通過(guò)爬你的html頁(yè)面將你用到的文字生成一個(gè)新的字體文件。具體使用方法可以點(diǎn)鏈接看下。

4.如何將js打包到指定路徑，方便閱讀管理

這里用到一些小技巧，可以將要打包的js的文件名帶上文件夾的路徑，這樣可以在生成js的時(shí)候自動(dòng)帶上相關(guān)路徑。如下會(huì)在dist目錄下生成app和browser兩個(gè)目錄，該目錄下分別存放 index.js、friendlist.js 和 step1.js、step2.js 具體代碼如下：

entry: {
    "vendor": ['fontSize','bootstrap'],
    "app/index": path.resolve(__dirname,'../src/app/index.js'),
    "app/friendlist": path.resolve(__dirname,'../src/app/friendlist.js'),
    "browser/step1": path.resolve(__dirname,'../src/browser/step1.js'),
    "browser/step2": path.resolve(__dirname,'../src/browser/step2.js')
},
output: {
    path: path.resolve(__dirname,'../dist'),
    publicPath : '/',
    filename: '[name].js',
    chunkFilename: '[id].[chunkhash].js'
}

5.webpack對(duì)圖片的處理？包括打包c(diǎn)ss文件引用到的圖片和頁(yè)面上直接用img標(biāo)簽加載的圖片

file-loader和url-loader都可以用來(lái)打包c(diǎn)ss所引用的img文件，但是如果要用到image-webpack-loader對(duì)圖片進(jìn)行壓縮的話，就使用file-loader。具體代碼如下：

module: {
    rules: [
        {
            test: /\.(jpeg|jpg|png|svg|gif)(\?[a-z0-9]+)?$/,
            use: [
            'file-loader?limit=10000&name=styles/images/[name].[ext]',
            'image-webpack-loader?progressive:true&opimizationLevel=4'
        ]
        
        }
    ]
}

值得注意的一點(diǎn)的是，使用image-webpack-loader進(jìn)行壓縮圖片，如果是win7系統(tǒng)下的話，需要配置一個(gè)環(huán)境變量。不然會(huì)報(bào)"unable to verify the first certificate"的錯(cuò)誤。這個(gè)有點(diǎn)坑。環(huán)境變量配置：NODE_TLS_REJECT_UNAUTHORIZED=0

而頁(yè)面上的img文件，可以通過(guò)'html-withimg-loader'進(jìn)行打包，在生成html頁(yè)面時(shí)帶上即可。代碼如下：

new HtmlWebpackPlugin({
    chunks: ['app/index','vendor'],
    filename: 'index.html',
    template:'html-withimg-loader!'+path.resolve(__dirname,'../src/common/tmpl/app/index.html'),
    inject: true
})

6.webpack如何將css文件抽離出來(lái)，添加前綴，以及壓縮你的css文件？

個(gè)人不怎么建議將css跟js一起打包進(jìn)一個(gè)文件，頁(yè)面樣式少還好，多的話不保證隨時(shí)出現(xiàn)樣式?jīng)_突的可能。而且全部打包在一起也會(huì)讓整個(gè)js文件變得臃腫。這里用到'extract-text-webpack-plugin'來(lái)抽離你項(xiàng)目里的css文件，用'postcss-loader'添加樣式前綴代碼如下：

`var ExtractTextPlugin = require('extract-text-webpack-plugin');

module: {
    rules: [
        {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: [
            {
                loader: 'css-loader',
                options: {
                    importLoaders: 1
                }
            },
            'postcss-loader'
            ]
            })
        }
    ]
}

new ExtractTextPlugin({
    filename: "styles/css/[name].[contenthash:6].css",
    allChunks: false
})

new webpack.LoaderOptionsPlugin({
    options: {
        postcss: () => {
            return [
                require('autoprefixer')({
                    browsers: ['last 5 versions']
                })
            ]
        }
    }
})

壓縮css的話用到的是'optimize-css-assets-webpack-plugin'

var OptmizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

new OptmizeCssAssetsPlugin({
    assetNameRegExp: /\.css$/g,
    cssProcessor: require('cssnano'),
    cssProcessorOptions: {discardComments:{removeAll: true}},
    canPrint: true
})

7.webpack如何切換開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境？

生產(chǎn)環(huán)境跟開(kāi)發(fā)環(huán)境的區(qū)別無(wú)非就是調(diào)用的接口地址、資源存放路徑、線上的資源是否需要壓縮等等這些方面。目前的做法是通過(guò)在packge.json通過(guò)設(shè)置node的一個(gè)全局變量然后在webpack.config.js文件里面進(jìn)行生產(chǎn)環(huán)境與開(kāi)發(fā)環(huán)境的配置切換。后續(xù)有好的方案再進(jìn)行改善。

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "set NODE_ENV=dev&& webpack --display-modules --display-chunks --config build/webpack.dev.conf.js",
    "build": "set NODE_ENV=prod&& webpack --display-modules --display-chunks --config build/webpack.dev.conf.js",
    "server": "set NODE_ENV=dev&& node build/dev-server.js"
  }

通過(guò)設(shè)置NODE_ENV的值，這樣執(zhí)行npm run webpack 和 npm run build命令就可以實(shí)現(xiàn)打包兩個(gè)不同環(huán)境的項(xiàng)目 ，配置文件中的代碼如下：

//針對(duì)開(kāi)發(fā)環(huán)境與生產(chǎn)環(huán)境做不同的配置
if(process.env.NODE_ENV == 'dev'){

    console.log("**********開(kāi)發(fā)環(huán)境打包中**********");
    //開(kāi)發(fā)環(huán)境下項(xiàng)目的輸出路徑
    config.output.publicPath = "/";

    //開(kāi)發(fā)環(huán)境下啟動(dòng)頁(yè)面監(jiān)聽(tīng) 動(dòng)態(tài)向入口配置中注入 webpack-hot-middleware/client
    var devClient = './build/dev-client';
    Object.keys(config.entry).forEach(function(name,i){
        var extras = [devClient];
        config.entry[name] = extras.concat(config.entry[name]);
    })

}else if(process.env.NODE_ENV === 'prod'){

    console.log("**********生產(chǎn)環(huán)境打包中**********");
    //生產(chǎn)環(huán)境下項(xiàng)目的輸出路徑
    config.output.publicPath = "http://xxx.com/app/events/yqm/";

    //生產(chǎn)環(huán)境下進(jìn)行的Plugins擴(kuò)展
    var ext_plugins = [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new OptmizeCssAssetsPlugin({
            assetNameRegExp: /\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorOptions: {discardComments:{removeAll: true}},
            canPrint: true
        })
    ];
    config.plugins = config.plugins.concat(ext_plugins);

}

總結(jié)

整個(gè)框架基本還是可以滿足基本的前端開(kāi)發(fā)，包括前后端分離、文件打包處理、第三方類(lèi)庫(kù)使用、頁(yè)面熱更新等等。這些都能大大提高前端開(kāi)發(fā)的效率。在搭建過(guò)程中一些常見(jiàn)的問(wèn)題并沒(méi)有在這里列舉出來(lái)，比如熱更新的配置，js壓縮，html頁(yè)面自動(dòng)生成等。還有一些功能沒(méi)有加進(jìn)來(lái)或者是還沒(méi)完善，如結(jié)合模板引擎的html頁(yè)面片段的引用、自動(dòng)化壓縮字體文件、生產(chǎn)環(huán)境與開(kāi)發(fā)環(huán)境下的處理不夠規(guī)范等等。