webpack + angularjs 打包项目

1、首先安装node环境就没什么好说的了。。

2、安装angualrjs

npm install angularjs -D

3、安装angualr（一直没明白明明是angualrjs1.x为啥非要提示装angular）

npm install angular -D

…此处省略一万字
下面贴出我的package.json

{
  "name": "gotham",
  "version": "1.0.0",
  "description": "ckotham",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve": "webpack-dev-server",
    "build": "webpack"
  },
  "author": "ceekay",
  "license": "ISC",
  "dependencies": {
    "angular": "^1.7.9",
    "express": "^4.17.1"
  },
  "devDependencies": {
    "angularjs": "0.0.1",
    "css-loader": "^3.4.2",
    "file-loader": "^5.0.2",
    "html-webpack-plugin": "^3.2.0",
    "jquery": "^3.4.1",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "sass": "^1.24.4",
    "style-loader": "^1.1.2",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
  },
  "main": "webpack.confing.js"
}

如空文件index.js

//=>css
require('./index.css');


//=>js
let $ = require('jquery')
angular = require('angular');
app = angular.module('Gotham',[])
siteUrl = 'http://192.168.0.41/MyCustom/Gotham/api/Gotham.php?com=';
baseUrl = 'http://127.0.0.1:8848/Gotham/src/';
require('../view/asset/iconfont/js/iconfont.js')
require('../controller/mainCtrl.js')
require('../view/asset/js/common.js')
require('../model/component/template.js')
require('../model/factory/service.js') 
require('../model/filter/filter.js')

入口文件index.css

@import url("../view/asset/iconfont/css/iconfont.css");
@import url("../view/asset/main.css");
@import url("../view/asset/css/head.css");
@import url("../view/asset/css/common.css");

基础配置文件 webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

module.exports = {
	mode: 'production',
	entry: './src/entry/index.js',
	output: {
		filename: './static/js/Gotham.min.js',
		path: path.resolve(__dirname,'dist')
	},
	plugins: [
		new HtmlWebpackPlugin({
			filename: 'index.html',
			hash: true,
			template: './src/index.html',
			minify:{
				collapseWhitespace: false,
				removeAttributeQuotes: true
			}
		}),
		new MiniCssExtractPlugin({
			filename: './static/css/Gotham.min.css'
		}),
		new OptimizeCssAssetsWebpackPlugin({
			assetNameRegExp: /\.css$/g,             // 匹配资源文件名
			cssProcessor: require('cssnano'),       // 压缩优化的css的处理器，默认是cssnano
			cssProcessorPluginOptions: {            // css处理器的配置项，具体可查看相对应css处理器的文档
				preset: ['default', { discardComments: { removeAll: true } }],
			},
			canPrint: true
		})
		
	],
	devServer: {
		port: 3000,
		open: true,
	},
	module: {
		rules: [{
			test: /\.css$/,
			use: [
				{
					loader: MiniCssExtractPlugin.loader,
					options:{
						publicPath: '../',
					}
				},
				'css-loader'
			]
		},
		{
			test: /\.(eot|svg|ttf|woff|woff2)$/,
			loader: 'file-loader',
			options: {
				outputPath: './static/font'
			}
		}
		]
	}
}

到目前为止，可以看到配置文件中css抽离压缩单独放置文件完成，字体库也打包完成，就图片还未处理
有一个问题：由于项目先用angularjs.1.x写的，当时没有考虑到需要webpack打包，现在打包时出现一个错误
Error: [$injector:unpr] Unknown provider: eProvider <- e <- xxxxxxx<-
这个 xxxxxxx有可能是controller，有可能是directive指令，也有可能是service，如：

let app = angular.module('myApp',[])
//=>这种写法其实是angularjs的语法糖，不是最规范的写法，所以uglifyJS压缩时会报错
	app.controller('myController',function($scope,xxService){
		//do you want to do...
	})
//=>这种是最保险的，可以兼容webpack压缩
	app.controller('myController',['$scocpe','xxService',function(a,b){
		//do you want to do...
	}])