Window环境 webpack构建angluar1项目，开发环境VsCode

相关环境

1. 安装nodejs环境，配置npm国内镜像（你懂的）

• 此过程请自行百度, 推荐npm config set registry https://registry.npm.taobao.org

2. 生成npm初始化配置，全局安装webpack

• npm init -y
• npm i -g webpack

3. 添加项目相关的依赖文件

• npm i -D webpack

4. 常用 webpack loaders

• style-loader 处理Css
• css-loader 处理Css
• url-loader 处理图片

5. 常用 webpack plugins

• webpack.HotModuleReplacementPlugin 热更新
• webpack.NoEmitOnErrorsPlugin 友好提示
• webpack.ProvidePlugin 代理第三方脚本库名
• webpack.optimize.CommonsChunkPlugin 提取公共代码
• webpack.DllReferencePlugin 提取公共DLL

5. 常用第三方 plugins

• clean-webpack-plugin 删除目录
• copy-webpack-plugin 复制目录
• html-webpack-plugin 按模板生成HTML
• friendly-errors-webpack-plugin 友好提示

6 其他相关

• path NodeJS 路径库
• __dirname NodeJS 系统常量
• opn NodeJS 打开URL
• express NodeJS 服务器框架
• ora console 加载(不显示相关的过程)
• chalk console 指定着色显示内容

如何改造现有项目(requireJs+angluar1 => webpack+angluar1)

目的: 在尽可以少的改动老的代码的情况下，更换requireJs代码到webpack,来完成项目的打包、压缩、热更新等等

1.老项目结构

|- css                  CSS文件
|- fonts                字体缩略图文件
|- html                 静态页面
|- img                  图片文件
|- scripts              脚本文件
|----js                 
|------app                  全局配置
|------common               公共文件
|------controllers          控件器文件
|------lib                  第三方库文件
|------model                页面模型
|------views                页面视图
|------main.js              reqireJs入口文件
|- index.html           主页面
|- login.html           登录页面

2.新项目结构

|- build                webpack配置文件目录 
|- node_modules         不解释（请自行百度）
|- src                  项目源文件
|---- css                  CSS文件
|---- fonts                字体缩略图文件
|---- html                 静态页面
|---- img                  图片文件
|---- scripts              脚本文件
|------js                 
|--------app                  全局配置
|--------common               公共文件
|--------controllers          控件器文件
|--------lib                  第三方库文件
|--------model                页面模型
|--------views                页面视图
|---- index.html           主页面模板文件
|---- login.html           登录页面模板文件
|- dist                 项目生成文件
|- package.json         不解释（请自行百度）

3.如何开始

• 安装相关的环境

npm init -y
npm i -D webpack style-loader css-loader url-loader
npm i -D clean-webpack-plugin copy-webpack-plugin html-webpack-plugin friendly-errors-webpack-plugin
npm i -D express opn ora chalk
npm i -S jquery bootstrap

• 写相关的webpack配置文件
  • 1. build/build.js 打包生产环境文件

      var ora = require('ora')
      var path = require('path')
      var chalk = require('chalk')
      var webpack = require('webpack')
      var webpackConfig = require('./webpack.prod.conf.js')
  
      var spinner = ora('开始打包项目...')
      spinner.start()
  
      webpack(webpackConfig, function (err, stats) {
          spinner.stop()
          if (err) throw err
          process.stdout.write(stats.toString({
              colors: true,
              modules: false,
              children: false,
              chunks: false,
              chunkModules: false
          }) + '\n\n')
  
          console.log(chalk.cyan('  打包完成.\n'))
          console.log(chalk.yellow(
              '  提示: 打包后的文件必须使用HTTP服务运行.\n' +
              '  打开 index.html 不然会提示文件没有找到.\n'
          ))
      })
  

  • 2. build/webpack.prod.conf.js 生成环境配置

      var webpack = require('webpack');
      var path = require('path');
      var cleanWebpackPlugin = require('clean-webpack-plugin');
      var copyWebpackPlugin = require('copy-webpack-plugin');
      var htmlWebpackPlugin = require('html-webpack-plugin');
  
      var staticHtmls = require('../src/html/index.js');
  
      function resolve (dir) {
      return path.join(__dirname, '..', dir)
      }
  
      var plugins = [
          new cleanWebpackPlugin(['prod']),
          new copyWebpackPlugin([
              {
                  from: resolve('src/scripts/js/lib'),
                  to: resolve('prod/scripts/js/lib'),
                  ignore: ['.*']
              }
          ]),
          // new webpack.optimize.CommonsChunkPlugin('common'),
          // new webpack.DllReferencePlugin({
          //     context: '',    
          //     manifest: require(libPath),
          // }),
          new webpack.ProvidePlugin({
              $: 'jquery',
              jQuery: 'jquery'
          }),
          new htmlWebpackPlugin({
              filename: 'index.html',
              template: resolve('src/index.html'),
              inject: false,
              title: '优健康后台管理系统',
              favicon: resolve('src/img/logo.png'),
              minify: {
                  caseSensitive: false, //是否大小写敏感
                  removeComments:true, // 去除注释
                  removeEmptyAttributes:true, // 去除空属性
                  collapseWhitespace: true //是否去除空格
              }
          }),
          new htmlWebpackPlugin({
              filename: 'login.html',
              template: resolve('src/login.html'),
              inject: false,
              title: '用户登录',
              favicon: resolve('src/img/logo.png'),
              minify: {
                  caseSensitive: false, //是否大小写敏感
                  removeComments:true, // 去除注释
                  removeEmptyAttributes:true, // 去除空属性
                  collapseWhitespace: true //是否去除空格
              }
          }),
          new webpack.optimize.UglifyJsPlugin({
              mangle: false,
              compress: {
                  // sourceMap: true,
                  warnings: false
              }
          })
      ];
  
      // var staticHtmls = ['home.html', 'server.html'];
      for (var key = 0; key < staticHtmls.length; key++) {
          var item = staticHtmls[key];
          plugins.push(new htmlWebpackPlugin({
              filename: 'html/index/' + item,
              template: resolve('src/html/index/' + item),
              inject: false,
              minify: {
                  caseSensitive: false, //是否大小写敏感
                  removeComments:true, // 去除注释
                  removeEmptyAttributes:true, // 去除空属性
                  collapseWhitespace: true //是否去除空格
              }
          }));
      }
  
      module.exports = {
          entry: {
              login: './src/scripts/js/view/login.js',
              index: './src/scripts/js/view/index.js',
          },
          devtool: '#source-map',
          output: {
              // filename: 'scripts/js/view/[name]-[chunkhash].js',
              filename: 'scripts/js/view/[name].js',
              // publicPath: '/',
              path: resolve('prod')
          },
          resolve: {
              alias: {
                  '$': 'jquery',
                  '~': resolve('src'),
                  '@': resolve('src/scripts/js')
              }
          },
          module: {
              rules: [
                  {
                      test: /\.css$/,
                      loader: [
                          'style-loader',
                          'css-loader'
                      ]
                  },
                  {
                      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                      loader: 'url-loader',
                      options: {
                          limit: 10000,
                          name: 'img/[name].[hash:7].[ext]'
                      }
                  },
                  {
                      test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                      loader: 'url-loader',
                      options: {
                          limit: 10000,
                          name: 'fonts/[name].[hash:7].[ext]'
                      }
                  }
              ]
          },
          externals: {
              angluar: {
                  amd: 'angluar',
                  root: 'angluar',
                  commonjs: 'angluar',
                  commonjs2: 'angluar'
              },
              jquery: 'window.jQuery'
          },
          plugins: plugins
      };
  

• 添加package.json启动脚本

"scripts": {
    "build": "node build/build.js"
  },

• 改造老的代码

// /* eslint-disable no-undef */
// define(['indexApp'
//       , 'common/util'
//       , 'Extend'
//       , 'common/const'
//       , 'sysConfig'
//       , 'common/BaseInfoManager'
//       , 'model/postionCategoryModel'
//       , 'model/doctorListModel'
//       , 'model/serviceDeptItemModel'
//       , 'jqueryMD5'
//       , 'service/baseService'],
//   function (app
//           , util
//           , Extend
//           , Const
//           , sysConfig
//           , cacheUser
//           , PostionCategoryModel
//           , DoctorListModel
//           , serviceDeptItemModel) {
//   });



require('@/common/Extend.js');
require('@/lib/jquery.md5.js');
var util = require('@/common/util.js');
var Const = require('@/common/const.js');
var sysConfig = require('@/common/SysConfig.js');
var cacheUser = require('@/common/BaseInfoManager.js');

var PostionCategoryModel = require('@/model/postionCategoryModel.js');
var DoctorListModel = require('@/model/doctorListModel.js');
var serviceDeptItemModel = require('@/model/serviceDeptItemModel.js');

require('@/service/baseService.js');

module.exports = function(app) {
    // Code
}

谢谢