文艺小说-?2F,言情小说-?3F,武侠小说-?9F
long long ago time-1-1:A ,long long A ago time-1-2:A ,long long ago time-1-3:A 使用(js组件构建)
long long ago time-2-1:B,long long A ago time-2-2:B 使用,long long ago time-2-3:B 使用 (cs样式兼容)
前端正在由蛮荒步入高阶时代!
读在最前面:
1、本文讲述Angular,Webpack 模块化、按需加载案例,
2、阅读本文,读者应了解Angular、WebPack,!移步
3、此文建立在已有node环境,sass环境,webpack环境下,特此说明
4、此文适合那些对前端优化(按需加载、请求合并、文件指纹、CDN部署、、首屏CSS内嵌 and so on)、组件化、工程化有一些思考的同学
5、技术点:angular、webpack、oclazyload、sass、autoprefixer
6、以下代码只帖出关键代码,下载完整项目,请拉到最底部!
构建Angular,Fire!
1、创建angular入口文件,app.js
描述:
(1)、第三方样式依赖:font-awesome
(2)、第三方js依赖:angular,angular-ui-router,oclazyload
(3)、业务逻辑、公共组件依赖:routing.js,directive.js
angular.module('app',[
require('angular-ui-router'),require('oclazyload'),require('./routing.js'),require('./directive.js')
])
.config(function($urlRouterProvider,$locationProvider) {
$urlRouterProvider.otherwise("home");
$locationProvider.html5Mode(true);
});
描述:
(1)、使用require.ensure实现异步加载
(2)、使用ocLazyLoad加载业务控制
plugins = [
new HtmlWebpackPlugin({
chunks: ['app','vendor'],template: __dirname + '/www/template/index.html',filename: './index.html'
}),new HtmlWebpackPlugin({
chunks: ['app',template: __dirname + '/www/template/mobile.html',filename: './mobile.html'
}),new monsChunkPlugin('vendor','script/vendor.[hash:6].js'),new ExtractTextPlugin("/css/styles.[hash:6].css"),new CleanWebpackPlugin('build',{
verbose: true,dry: false
}),new NgAnnotatePlugin({
add: true
})
];
if (!DEV) {
//压缩
plugins.push(new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}));
publicPath = process.env.NODE_ENV == 'test' ? '' : '';
devtool = 'source-map';
}
var config = {
//入口文件配置
entry: {
app: path.resolve(__dirname,'www/app/app.js'),vendor: ["angular",'angular-ui-router','oclazyload']
},//文件导出的配置
output: {
path: buildPath,filename: "script/[name].[hash:6].js",publicPath: publicPath,chunkFilename: "chunks/[name].chunk.[chunkhash].js"
},//本地服务器配置
devServer: {
historyApiFallback: true,hot: true,inline: true,grogress: true
},//模块配置
module: {
loaders: [{
test: /.html$/,loader: 'raw'
},{
test: /.(png|jpg|gif)$/,loader: 'url?limit=8192,name=/img/[name].[hash:6].[ext]'
},{
test: /.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,loader: 'url-loader?importLoaders=1&limit=1000&name=/fonts/[name].[ext]'
},{
test: /.css$/,loaders: ['style','css'],},{ //外链
test: /.scss$/,loader: ExtractTextPlugin.extract("style-loader","css-loader!sass-loader!postcss-loader")
}
//,{ //内联
// test: /.scss$/,// loaders: ['style','css','sass','postcss']
// }
]
},postcss: function() {
return [autoprefixer()];
},//插件配置
plugins: plugins,//调试配置
devtool: devtool
}
module.exports = config;
备注:
1、原理说明:webpack采用依赖(require)来进行项目构建,一切皆require,它会根据你在webcofig中配置的js入口文件进行检索,然后构建出你整个资源环境。
2、配置说明:
(1)、angular构建中,按需加载主要涉及:require,ocLazyLoad
(2)、webpack构建中,主要涉及插件包括:html模板、css分隔、自动注解、目录删除、文件压缩、文件指纹
(3)、webpack构建中,主要涉及loader包括:css、sass、postcss、file、url、style、raw
3、