webpack修改步骤

未分类

Steps:

1.install webpack packages
2.install loaders
3.install plugins
5.修改index.html
6.增加index.js
7.修改app/app.route.js
8.修改app/app.config.js
9.修改templateUrl
10.修改controller
11.修改directive
12.修改service
13.修改autoForm

install webpack packages

npm install webpack webpack-cli webpack-dev-server webpack-merge -D

install loaders

npm install style-loader css-loader html-loader extract-loader file-loader url-loader babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime -D
npm install @babel/runtime -S

install plugins

npm install html-webpack-plugin clean-webpack-plugin mini-css-extract-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D

修改index.html

将index.html里面script标签引入的第三方包移除

增加index.js

在index.js通过require引入第三方包

require('bootstrap/dist/js/bootstrap.min.js');
require('datatables.net-dt/js/dataTables.dataTables.min.js');
require('datatables.net');
require('angular');
require('angular-translate/dist/angular-translate.min.js');
require('angular-cookies/angular-cookies.min.js');
require('angular-datatables/dist/angular-datatables.min.js');
require('angular-ui-router');
require('oclazyload/dist/ocLazyLoad.min.js');
require('angular-resource/angular-resource.min.js');
require('angular-aria/angular-aria.min.js');
require('angular-animate');
require('angular-messages/angular-messages.min.js');
require('angular-material');
require('angular-file-upload/dist/angular-file-upload.min.js');
require('angular-websocket/dist/angular-websocket.min.js');
require('angular-sanitize/angular-sanitize.min.js');
require('datatables.net-dt/css/jquery.dataTables.min.css');
require('angular-material/angular-material.min.css');
require('angular-datatables/dist/css/angular-datatables.min.css');
require('bootstrap/dist/css/bootstrap.min.css');
require('font-awesome/css/font-awesome.min.css');
require('./app/app.module.js');
require('./app/app.route.js');
require('./app/app.config.js');

修改app/app.route.js

修改lazyload引入方式，通过require.ensure引入

.state('dashboard.container', {
        url: 'container',
        template: '<container></container>',
        resolve: {
            container: $ocLazyLoad.load([
                       server_path + 'app/page/container/container.controller.js',
                       server_path + 'app/page/container/container.css',
            ])
        }
})

.state('dashboard.container', {
         url: 'container',
         template: require('./page/container/container.html'),
         resolve: {
             container: ['$q', '$ocLazyLoad', function ($q, $ocLazyLoad) {
                 let deferred = $q.defer();
                 require.ensure([], function () {
                     $ocLazyLoad.inject([
                         require('./page/container/container.controller.js'),
                         require('./page/container/container.css')
                     ]);
                     deferred.resolve();
                 }, 'containerLazyLoad');
                 return deferred.promise;
             }]
         }
 })

## 修改app/app.config.js

修改多语言的引用方式，改成require

var prefixpath = dev?'app/i18n/':'static/app/i18n/';
var lang = window.localStorage['lang'] || 'zh-hans';
$translateProvider.preferredLanguage(lang)
                  .useStaticFilesLoader({
                    prefix: prefixpath,
                    suffix: '.json'
                  })
                  .useSanitizeValueStrategy('escape');

const en = require('./i18n/en.json');
const zh = require('./i18n/zh-hans.json');
let lang = window.localStorage['lang'] || 'zh-hans';
$translateProvider.translations('en', en).useSanitizeValueStrategy('escape');
$translateProvider.translations('zh-hans', zh).useSanitizeValueStrategy('escape');
$translateProvider.preferredLanguage(lang);

修改templateUrl

将templateUrl改成template，并通过require引入，如果想用懒加载，可以用templateProvider

templateUrl: localStorage.getItem("server_path") +'app/share/autoForm/auto-form-flat.html'
template: require('./auto-form-flat.html')

修改controller

移除component里面的templateUrl、controller、controllerAs。增加module.exports，在component里面增加template，通过require导入。增加.controller，在html增加ng-controller。

angular.module('leapai')
        .component('userGM', {
            templateUrl: localStorage.getItem("server_path") + 'app/page/adminArea/userGM/userGM.html',
            controller: userGMController,
            controllerAs: 'userGM',
            bindings: {}
        });

module.exports = angular.module('leapai')
        .component('userGM', {
            template: require('./userGM.html'),
            bindings: {}
        }).controller('userGMController', userGMController);
<div ng-cloak ng-controller="userGMController as userGM">

修改directive

将directory以及directory里面的controller通过注入的方式注入$scope、$timeout等变量

angular.module('leapai')
    .directive('autoFormFlat', function($timeout) {
    return {
        restrict: 'E',
        scope: {
            options:'=options',
        },
        replace: false,
        templateUrl: localStorage.getItem("server_path") +'app/share/autoForm/auto-form-flat.html',
        controller:function ($scope) {
        ...

angular.module('leapai')
    .directive('autoFormFlat', ["$timeout",function($timeout) {
    return {
        restrict: 'E',
        scope: {
            options:'=options',
        },
        replace: false,
        template: require('./auto-form-flat.html'),
        controller:["$scope",function ($scope) {
        ...

修改service

通过注入的方式注入$scope,$timeout等变量

(function () {
    'use strict';
    angular.module('leapai')
        .factory('usersSelect', usersSelect);
    function usersSelect($rootScope) {
    ...

(function () {
    'use strict';
    angular.module('leapai')
        .factory('usersSelect', usersSelect);
    usersSelect.$inject=['$rootScope'];
    function usersSelect($rootScope) {
    ...

修改autoForm

1. style修改成ng-style，如auto-form-dialog.html第3行；

遇到的问题

1. 无法在html使用$，提示$ is not defined, 如ngIframe.directive.js第12行；已修复
2. 控制台警告：Module not found: Error: Can't resolve 'bufferutil',Module not found: Error: Can't resolve 'utf-8-validate'； 无需修复，经查询是未用上所以不打包
3. 无法在html使用<>，如jobConfig.html第37行（已解决，< >改成&lt; &gt;）；
4. ajax is not defined，fileSystem.controller.js第778行； 已修复
5. 翻译显示英文(已解决，修改success、error、info)；已重写notify组件
6. directive、service、factory注入变量；
7. 无法使用async await（已解决，增加@babel/plugin-transform-runtime插件）；
8. 访问我的应用，控制台提示Cannot assign to read only property 'exports' of object '#<Object>'（以解决，在babel-loder增加配置sourceType: "unambiguous"）；
9. node_modules的部分第三方库被重复打包（已解决，将index.js引入的第三方库由min.js改为库名直接引入）；

webpack性能优化

1. 升级webpack、npm版本；
2. 在尽可能少的模块使用loader；
3. Plugin尽可能精简并确保可靠；
4. 使用Dllplugin提高打包速度；
5. 将vendors.js进行缓存（在生产环境使用contenthash，当内容发生改变时hash会发生变化；contenthash和热更新冲突，在开发环境使用hash）；