1.如何解決使用基于express框架搭建的node前端服務(wù)器調(diào)用接口時(shí)的跨域問題蟹瘾？
使用npm提供的 http-proxy-middleware 插件可以很方便的處理跨域請求异希。比如某個(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插件臀叙、以及其他的一些第三方類庫巴席？
打包jquery不能像其他第三方類庫一樣打包進(jìn)vendor疼进，因?yàn)槟承﹋query插件依賴于jquery兰迫，所以在引用的時(shí)候會(huì)導(dǎo)致"$ is undefined"這類情況信殊。較好的做法是通過引用expose-loader去解決問題。具體代碼如下：
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'
而對于一些全局引用的第三方類庫涡拘，建議還是打包成一個(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')
}
}
將所有第三方類庫打包到一個(gè)vendor.js并輸出到預(yù)期路徑据德，值得注意的是輸出的filename帶上hash的話可以讓hot-middle-ware組件識別鳄乏，從而達(dá)到熱更新的效果，所以建議帶上
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor'],
filename: 'common/[name][hash].js'
})
3.引入中文字體文件過大棘利，導(dǎo)致頁面加載過慢的問題
在我們開發(fā)的時(shí)候橱野，實(shí)際拿到的頁面很多的字體效果都不是手機(jī)默認(rèn)的字體，但是由于中華文化博大精深善玫，一個(gè)中文字體文件搞下來就好幾M水援，打開個(gè)頁面卡得是生活不能自理。解決方案是用到npm提供的一個(gè)叫font-spider的插件茅郎。原理是通過爬你的html頁面將你用到的文字生成一個(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對圖片的處理楷兽？包括打包c(diǎn)ss文件引用到的圖片和頁面上直接用img標(biāo)簽加載的圖片
file-loader和url-loader都可以用來打包c(diǎn)ss所引用的img文件，但是如果要用到image-webpack-loader對圖片進(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
而頁面上的img文件核偿，可以通過'html-withimg-loader'進(jìn)行打包诚欠，在生成html頁面時(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文件抽離出來，添加前綴轰绵，以及壓縮你的css文件粉寞？
個(gè)人不怎么建議將css跟js一起打包進(jìn)一個(gè)文件，頁面樣式少還好左腔，多的話不保證隨時(shí)出現(xiàn)樣式?jīng)_突的可能唧垦。而且全部打包在一起也會(huì)讓整個(gè)js文件變得臃腫。這里用到'extract-text-webpack-plugin'來抽離你項(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如何切換開發(fā)環(huán)境和生產(chǎn)環(huán)境振亮？
生產(chǎn)環(huán)境跟開發(fā)環(huán)境的區(qū)別無非就是調(diào)用的接口地址、資源存放路徑鞭莽、線上的資源是否需要壓縮等等這些方面坊秸。目前的做法是通過在packge.json通過設(shè)置node的一個(gè)全局變量然后在webpack.config.js文件里面進(jìn)行生產(chǎn)環(huán)境與開發(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"
}
通過設(shè)置NODE_ENV的值褒搔，這樣執(zhí)行npm run webpack 和 npm run build命令就可以實(shí)現(xiàn)打包兩個(gè)不同環(huán)境的項(xiàng)目 ，配置文件中的代碼如下：
//針對開發(fā)環(huán)境與生產(chǎn)環(huán)境做不同的配置
if(process.env.NODE_ENV == 'dev'){
console.log("**********開發(fā)環(huán)境打包中**********");
//開發(fā)環(huán)境下項(xiàng)目的輸出路徑
config.output.publicPath = "/";
//開發(fā)環(huán)境下啟動(dòng)頁面監(jiān)聽 動(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è)框架基本還是可以滿足基本的前端開發(fā)喷面，包括前后端分離星瘾、文件打包處理、第三方類庫使用乖酬、頁面熱更新等等死相。這些都能大大提高前端開發(fā)的效率。在搭建過程中一些常見的問題并沒有在這里列舉出來咬像，比如熱更新的配置算撮，js壓縮，html頁面自動(dòng)生成等县昂。還有一些功能沒有加進(jìn)來或者是還沒完善肮柜，如結(jié)合模板引擎的html頁面片段的引用、自動(dòng)化壓縮字體文件倒彰、生產(chǎn)環(huán)境與開發(fā)環(huán)境下的處理不夠規(guī)范等等审洞。
