基于webpack构建的angular 1.x 工程(一)webpack篇
基于webpack构建的angular 1.x 工程(一)webpack篇??现在AngularJS都已经出到4.x的版本了,可我对它的认识还是停留在1.x的版本。 首先,要先配置好工程文件。??我先列一下我的 { "name": "angular-ionic-webpack","version": "1.0.0","description": "a project base on angular 1.x and webpack","main": "index.js","scripts": { "build": "webpack --config ./build/webpack.prod.config.js","dev": "set NODE_ENV=dev&& webpack-dev-server --config ./build/webpack.dev.config.js" },"devDependencies": { "css-loader": "^0.26.4","extract-text-webpack-plugin": "^3.0.1","html-loader": "^0.4.4","html-webpack-plugin": "^2.24.1","style-loader": "^0.13.1","url-loader": "^0.5.7","webpack": "^3.1.0","webpack-dev-server": "^2.9.2","webpack-manifest-plugin": "^1.3.2","webpack-merge": "^4.1.0" },"dependencies": { "angular": "1.4.3","angular-cache": "^4.5.0","angular-cookies": "1.4.12","angular-ui-router": "^0.3.2","jquery": "^3.2.1" },"author": "homer","license": "MIT" } ??第一个首先是项目直接用到的依赖,也就是 "dependencies": { "angular": "1.4.3","jquery": "^3.2.1" } ??我这里的 ??接下来是开发时用到的依赖: "devDependencies": { "css-loader": "^0.26.4", ??各种loader是必要的,因为webpack在打包的时候会把你项目里的非js文件转换出来然后打包在一起。我们常用的loader有 "scripts": { "build": "webpack --config ./build/webpack.prod.config.js", 这样写的意思是,当你输入 ??关于这份 然后来写webpack的配置文件概述??安装了webpack,我们要配置好,让它按照我们的期望来工作。 webpack基本结构??webpack的配置主要分为几个部分:
??这四个是webpack配置的基本部分,写好了这四个基本可以打包成功了。 var path = require('path'); var root = path.resolve(__dirname,'../'); module.exports = { entry: { 'main': root + 'appindex.js',jquery:['jquery'],ionic:root+'appassetslibionicreleasejsionic.bundle.min.js',datepicker:root+'appassetslibionic-datepickerreleaseionic-datepicker.bundle.min.js',calendar_pk:root+'appassetslibcalendar-pkreleasejscalendar_pk.min.js' },module: { loaders: [ { test: /.(png|jpe?g|gif|woff|svg|eot|ttf)(?.*)?$/,loader: 'url-loader',query: { limit: 10000,} },{ test: /.html$/,loader: 'html-loader' } ] },resolve: { extensions: ['.js','.json'] } }; ??入口(entry)文件其实不一定是只有一个,我这里就有多个。只要路径分开写正确就可以了。 开发打包配置??我们的开发打包配置是这样的: var baseconf = require('./webpack.base.config'); var merge = require('webpack-merge'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var webpack = require('webpack'); var server = require('./configDevServer'); var path = require('path'); var root = path.resolve(__dirname,'../'); var plugins = [ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify("development") } }),new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }),new webpack.ProvidePlugin({ $: 'jquery',jQuery: 'jquery','window.jQuery': 'jquery','window.$': 'jquery' }),new webpack.optimize.CommonsChunkPlugin({ name: 'vendor',// 这公共代码的chunk名为'commons' filename: '[name].bundle.js',// 生成后的文件名,虽说用了[name],但实际上就是'commons.bundle.js'了 minChunks: 3,// 设定要有4个chunk(即4个页面)加载的js模块才会被纳入公共代码。这数目自己考虑吧,我认为3-5比较合适。 }),new HtmlWebpackPlugin({ filename: 'index.html',template: 'index.html',inject: true }),new webpack.HotModuleReplacementPlugin() ]; baseconf.module.loaders.push( { test: /.css$/,loader: ['style-loader','css-loader'],} ); module.exports = merge(baseconf,{ output: { path: root+"/dist",publicPath: "/",filename: "./js/[name].[chunkhash].js" },devtool: 'cheap-module-eval-source-map',devServer: server,plugins: plugins,}); ??我们首先把基本的配置引进来。然后写插件(plugin),毕竟我们开发配置想实现的功能有部分需要插件来做。 const server={ contentBase:'/dist/',host: 'localhost',//服务主机 port: 8089,//端口 inline: true,// 可以监控js变化 hot: true,// 热启动 compress: true,watchContentBase: true,proxy: {//设置代理服务器,用于调试接口 '/api':{ target:'http://www.baidu.com',pathRewrite:{"^/api": "/api"}//重写路径 } } }; module.exports= server; ??可以看上面的备注来理解对应的配置项的意思。 生产环境配置??同样,先上配置: var baseconf = require('./webpack.base.config'); var path = require('path'); var root = path.resolve(__dirname,'../'); var merge = require('webpack-merge'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var webpack=require('webpack'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var ManifestPlugin = require('webpack-manifest-plugin'); var plugins = [ new webpack.DefinePlugin({ 'process.env': { NODE_ENV:JSON.stringify("development") } }),new HtmlWebpackPlugin({ filename: 'index.html',new ExtractTextPlugin({ filename: './css/[name].css?[contenthash:8]',allChunks: true,}),'window.$': 'jquery',new webpack.optimize.CommonsChunkPlugin({ name: 'commons',// 这公共代码的chunk名为'commons' filename: './js/[name].bundle.js',// 生成后的文件名 minChunks: 3,new ManifestPlugin(path.join('dist','manifest.json')) ]; baseconf.module.rules.push( { test: /.css$/,'css-loader'] } ); module.exports=merge(baseconf,{ output: { path: root+"/dist",publicPath: "./",filename: "./js/[name].[chunkhash].js" },devtool: false,plugins: plugins }); ??重复的插件我们就不说了,我们说说几个上面没有的插件。 来跑一遍吧!在你的入口的地方建立一个配置里的entry规定名字的js文件,就可以先跑一遍webpack。 接下来,我会就angular 1.x 用webpack打包打包遇到的坑来说一说,请看下一篇文章: 基于webpack构建的angular 1.x工程(angular篇) 想看详细代码,可以访问我的项目地址 有什么问题或者不对的地方欢迎指出,谢谢阅读! 本文原创,未经授权请勿转载。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |