我在一个非常古老的项目中使用 angular 1.5 和 express。现在我需要对其进行改造(而不是重建)。
我正在添加一些 webpack 优化并将其传输到客户端渲染 Angular 应用程序并将服务器代码与客户端代码分离。
我的最终目标是 - 使用 webpack 2 和 angular 1.5,使用具有最新代码标准的 ES6,6 功能来制作完整的工作流程。
我想使用 webpack 2 的特性,比如代码拆分和 tree shaking,这样我就可以按需加载所有模块。
为此,我创建了一个 webpack 配置。如果我{modules: false}
从中删除它可以正常工作,.babelrc
但是添加它对于摇树是必不可少的。
我的问题是,这几乎是我实现摇树所需要做的一切。但即使在这一切之后,我的 app.hash.js 构建后的文件也包含所有angular
代码lodash
。相反,它应该是仅适用module
于Angular且仅适用于 lodash 的代码map
这是我的应用索引
import { module } from 'angular';
import { map } from 'lodash';
import '../style/app.css';
let app = () => {
return {
template: require('./app.html'),
controller: 'AppCtrl',
controllerAs: 'app'
}
};
class AppCtrl {
constructor() {
this.appName = 'Fishry';
const obj = {
a: 'abc',
d: 'efg'
}
_.map(obj, (value, key) => {
console.log(value, key)
})
}
}
const MODULE_NAME = 'app';
module(MODULE_NAME, []).directive('app', app).controller('AppCtrl', AppCtrl);
export default MODULE_NAME;
这是我的 webpack conf
'use strict';
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var ProgressBarPlugin = require('progress-bar-webpack-plugin');
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
var CompressionPlugin = require("compression-webpack-plugin");
var pkg = require('./package.json');
/**
* Env
* Get npm lifecycle event to identify the environment
*/
var ENV = process.env.npm_lifecycle_event;
var isTest = ENV === 'test' || ENV === 'test-watch';
var isProd = ENV === 'build';
module.exports = function makeWebpackConfig() {
/**
* This is the object where all configuration gets set
*/
var config = {};
/**
* Should be an empty object if it's generating a test build
* Karma will set this when it's a test build
*/
config.entry = isTest ? void 0 : {
app: './src/app/app.js',
// vendor: ['angular', 'lodash'],
};
/**
* Should be an empty object if it's generating a test build
* Karma will handle setting it up for you when it's a test build
*/
config.output = isTest ? {} : {
// Absolute output directory
path: __dirname + '/dist',
// Output path from the view of the page
// Uses webpack-dev-server in development
publicPath: isProd ? '/' : 'http://localhost:8080/',
// Filename for entry points
// Only adds hash in build mode
filename: isProd ? '[name].[hash].js' : '[name].bundle.js',
// Filename for non-entry points
// Only adds hash in build mode
chunkFilename: isProd ? '[name].[hash].js' : '[name].bundle.js'
};
/**
* Devtool
* Reference: http://webpack.github.io/docs/configuration.html#devtool
* Type of sourcemap to use per build type
*/
if (isTest) {
config.devtool = 'inline-source-map';
} else if (isProd) {
config.devtool = 'source-map';
} else {
config.devtool = 'source-map';
}
/**
* Loaders
* Reference: http://webpack.github.io/docs/configuration.html#module-loaders
* List: http://webpack.github.io/docs/list-of-loaders.html
* This handles most of the magic responsible for converting modules
*/
// Initialize module
config.module = {
rules: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
{
test: /\.css$/,
loader: isTest ? 'null-loader' : ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: [
{loader: 'css-loader', query: {sourceMap: true}},
{loader: 'postcss-loader'}
],
})
},
{ test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/, loader: 'file-loader' },
{ test: /\.html$/, loader: 'raw-loader' }
]
};
// ISTANBUL LOADER
// https://github.com/deepsweet/istanbul-instrumenter-loader
// Instrument JS files with istanbul-lib-instrument for subsequent code coverage reporting
// Skips node_modules and files that end with .spec.js
if (isTest) {
config.module.rules.push({
enforce: 'pre',
test: /\.js$/,
exclude: [
/node_modules/,
/\.spec\.js$/
],
loader: 'istanbul-instrumenter-loader',
query: {
esModules: true
}
})
}
config.plugins = [
new webpack.LoaderOptionsPlugin({
test: /\.scss$/i,
options: {
postcss: {
plugins: [autoprefixer]
}
}
}),
new ProgressBarPlugin()
];
if (!isTest) {
config.plugins.push(
new HtmlWebpackPlugin({
template: './src/public/index.html',
inject: 'body'
}),
new ExtractTextPlugin({filename: 'css/[name].css', disable: !isProd, allChunks: true})
)
}
// Add build specific plugins
if (isProd) {
config.plugins.push(
new webpack.NoEmitOnErrorsPlugin(),
// new BundleAnalyzerPlugin({
// analyzerMode: 'static'
// }),
// new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js' }),
new webpack.optimize.UglifyJsPlugin(),
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.(js|html)$/,
threshold: 10240,
minRatio: 0.8
}),
new CopyWebpackPlugin([{
from: __dirname + '/src/public'
}]),
new webpack.BannerPlugin('Fishry SDK ' + pkg.version + ' - copyrights reserved at Bramerz (PVT) ltd')
)
}
/**
* Dev server configuration
* Reference: http://webpack.github.io/docs/configuration.html#devserver
* Reference: http://webpack.github.io/docs/webpack-dev-server.html
*/
config.devServer = {
contentBase: './src/public',
stats: 'minimal'
};
return config;
}();
这是按.babelrc
文件
{
"presets": [
["es2015", {modules: false}],
"stage-0"
],
"plugins": [
"angularjs-annotate",
"transform-runtime"
]
}