摘要：基于構建的工程一篇現在都已經出到的版本了，可我對它的認識還是停留在的版本。然后是寫啟動的命令行，也就是上面的這樣寫的意思是，當你輸入你的命令名字就會讓執行你對應命令的語句。我們首先把基本的配置引進來。

??現在AngularJS都已經出到4.x的版本了，可我對它的認識還是停留在1.x的版本。
??之前用它是為了搭配ionic來寫web手機天氣 應用（用來應付我大學里一門學科的課設的︿(￣︶￣)︿）。之后就因為它太難學而沒有繼續深入下去。
??現在就職的公司也有個項目是做混合式的手機app的，居然也是用AngularJS+ionic來做的，而且也是用1.x的版本。
??本來沒我什么事的，我這段時間都在用Vuejs。然后上頭發現那個項目加載是在太慢了，問我有沒有優化的方法。我看了下項目工程結構，發現是用gulp打包的一個工程。可能剛開始做這個項目的時候沒掌握好要點，導致整個項目臃腫不堪。gulp我是不會的了，由于一直在用Vuejs，官方cli提供的模板就是用webpack打包的，而且我之前寫ReactJS用的也是webpack來打包的。因此，我就用了webpack來重構一下工程。然后寫下這篇詳細的文章，想給可能會同樣遇到的這種問題的朋友做一個參考( ? ?ω?? )?。 另外，本文也可以當做webpack的一篇入門文章。

??我先列一下我的package.json里的配置：

{
  "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里的東西
分別有：

 "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"
  }

??我這里的angular和angular-cookies都用了具體的版本（就是版本號前面沒有用符號^，直接寫數字1.4.3），因為不合版本的這兩個東西會跟ionic里的angular-ui-router發生沖突導致渲染失敗。
??而我這里也沒有裝ionic，是因為我直接引用的時候會報can"t resolve "ionic"的錯誤，我也不知道為什么，所以我是直接調用了/app/assets/lib里的ionic.bundle.min.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"
  },

??各種loader是必要的，因為webpack在打包的時候會把你項目里的非js文件轉換出來然后打包在一起。我們常用的loader有css-loader,url-loader,這兩個分別是解析css和圖片的。然后其他的loader我們要看項目需求來按需選取，比如我這里因為是angular 1.x的項目，里面還有挺多的html模板，所以我這里用到了html-loader來解析html。
??其次是webpack——說句題外話，其實webpack一般都是用最新的，因為打包的環境跟所用的框架其實沒有太多互相干擾的地方。我一開始想著用的1.x的webpack發現用起來不怎么方便，于是又改回最新的3.x。這也算是個人的一個小小心得吧。然后我們還用了webpack-dev-server。這個是在我們開發的時候用的服務器，可以熱替換更新代碼。很方便，至于怎么用我后面會詳細講。然后就是webpack-merge這個東西是用來合并webpack配置，這個是在vue項目里看到，感覺還挺好用，就也模仿著用了。最后就是各種插件，extract-text-webpack-plugin這個用來把css樣式獨立打包成一個css文件的插件，沒有它的話，樣式只會注入index.html做內聯樣式；html-webpack-plugin是用于把js注入到index.html里；webpack-manifest-plugin是用來生成網頁的manifest文件的。
??然后是寫啟動webpack的命令行，也就是上面的：

"scripts": {
    "build": "webpack --config ./build/webpack.prod.config.js",
    "dev": "set NODE_ENV=dev&& webpack-dev-server --config ./build/webpack.dev.config.js"
  },

這樣寫的意思是，當你輸入npm run + 你的命令名字就會讓npm執行你對應命令的語句。比如輸入npm run dev，相當于你執行了上面那條dev對應的set NODE_ENV=dev&& webpack-dev-server --config ./build/webpack.dev.config.js"這條語句。這里dev命令執行的是開發版本打包并生成開發的服務器；build命令執行的則是生產版本打包。在打包開發版本的時候，用的是webpack-dev-server，我們讓它按照./build/webpack.dev.config.js里的配置（下文會提到）來執行。在打包生產環境，是直接運行webpack,讓它按照./build/webpack.prod.config.js里的配置來執行。

??關于這份package.json里其他的配置有問題的可以在評論里提哈~~

??安裝了webpack，我們要配置好，讓它按照我們的期望來工作。
一般我們都會用 webpack.config.js來命名webpack的配置文件，以免和其他配置文件搞混。但是由于我們一般都會分開開發環境和生產環境，而對于這個兩個環境打包我們要求會有點不一樣。開發環境我們希望它可以直接模仿生產環境放上服務器測試；
然后又想它可以一有改動就會自動打包更新顯示在頁面，不用我們手動刷新瀏覽器；
不希望它打包花的時間太長；如果出錯會有相應的提示等等。而生產環境我們想盡量壓縮文件大小，生成manifest文件等等。因此，我們就需要把開發打包和生產打包的配置分開來。這里我們就分開了 webpack.dev.config.js和webpack.prod.config.js兩個文件。但是還是有些配置是兩個文件都會用到的，本著復用的精神，所以我們還有一個 webapck.base.config.js來記錄公共的配置。

??webpack的配置主要分為幾個部分：

webpack打包文件的入口（entry）。

webpack打包完文件后輸出的出口（output）。

webpack在打包文件時的模塊配置（module）。

webpack在打包文件時用到的插件（plugin）。

??這四個是webpack配置的基本部分，寫好了這四個基本可以打包成功了。
還有其他要用的配置后面會說到，其他配置沒用到的可以看一下官方的文檔(3.x的官網)/ (個人覺得翻譯的比較好的中文文檔)。接下來我們先來分析下開發環境和生成環境共用的部分配置。首先入口文件一般都是一樣的吧？然后打包時模塊配置也是一樣的，因為你打包時的文件都是一樣的，所以設置也是一樣的。所以我們webpack.base.config.js是這樣寫的：

var path = require("path");
var root = path.resolve(__dirname, "../");

module.exports = {
    entry: {
        "main": root + "appindex.js",
        jquery:["jquery"],
        ionic:root+"appassetslibionic
eleasejsionic.bundle.min.js",
        datepicker:root+"appassetslibionic-datepicker
eleaseionic-datepicker.bundle.min.js",
        calendar_pk:root+"appassetslibcalendar-pk
eleasejscalendar_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）文件其實不一定是只有一個，我這里就有多個。只要路徑分開寫正確就可以了。
??然后是模塊（module）配置，webpack的思想是把工程所有的js都是模塊，然后全部打包在一起。所以遇到一些非js會有麻煩。但是他們早就預料這種情況，做出了一些系列的loader（加載器）來把一些非js文件做成webpack能打包的東西。
一般都會用到的是css-loader, url-loader。這兩個分別用來解析項目里.css和圖片字體之類的文件。上面說過，由于項目中會有較多的.html文件要引用，所以我們還用了 html-loader。我這里還有一個 resolve（解析）的配置，這個是用來js里引用文件的時候，不寫后綴的話，webpack就會自動為其加上.js或.json的后綴，可以省一些寫后綴的時間(???)。

??我們的開發打包配置是這樣的：

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），畢竟我們開發配置想實現的功能有部分需要插件來做。
webpack.DefinePlugin是用來讓webpack知道正在準備的是開發環境打包。某些框架會識別開發和生產環境，然后在我們開發的時候會給出相應的警告和提示，而在生產環境則會屏蔽這些內容。webpack.ProvidePlugin是當我們用到 jQuery之類的js庫的時候，用到的相關符號都會自動進行引用，不會導致報錯。webpack.optimize.CommonsChunkPlugin是用來提取我們代碼里的公共用到的部分，避免代碼重復打包，減少代碼體積。webpack.HotModuleReplacementPlugin是用來啟用我們的代碼熱替換功能，在我們改了代碼之后開發服務器可以重新打包更新，瀏覽器自動刷新，把我們的改動顯示在頁面。HtmlWebpackPlugin是我們自己安裝的插件，用來把生成的js自動插入到我們的html模板里面。
??寫完了插件之后，我們還要寫輸出（output）。這里指定下輸出文件夾和輸出的js名字即可。然后是是開發工具（devtool）和開發服務器（dev-server），開發工具的意思是，webpack會根據打包的文件做出一個標識的map文件，如果代碼出錯的話，它會找出來，然后提示在什么地方。方便修改代碼。開發服務器是一個建立在本地的服務器，上面就是你的項目。搭配熱替換功能，開發會很方便。這里順帶簡單介紹下，開發服務器配置 ./build/configDevServer.js：

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;

??可以看上面的備注來理解對應的配置項的意思。
??上文我們裝了個 webpack-merge這時就發揮作用了。正如它的名字一樣，它會把兩個webpack配置合并起來。然后輸出。這樣我們的開發環境配置寫好了

??同樣，先上配置：

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 webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    }),
    new HtmlWebpackPlugin({
        filename: "index.html",
        template: "index.html",
        inject: true
    }),
    new ExtractTextPlugin({
        filename: "./css/[name].css?[contenthash:8]",
        allChunks: true,
    }),
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
        "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$/,
        loader: ["style-loader","css-loader"] }
);
module.exports=merge(baseconf,{
    output: {
    path: root+"/dist",
        publicPath: "./",
        filename: "./js/[name].[chunkhash].js"
},
    devtool: false,
    plugins: plugins
});

??重復的插件我們就不說了，我們說說幾個上面沒有的插件。 webpack.optimize.UglifyJsPlugin是用來壓縮混淆js代碼的。ExtractTextPlugin是我們另外安裝的，用來把打包的css獨立出來成一個css文件。使用這個插件的時候，css的loader要相應做一下設置，所以可以看到 css-loader我沒有放到公共配置，里面而是分開了。ManifestPlugin也是另外安裝的，用來生成manifest緩存文件，使網站可以減少對靜態資源的重復請求。另外你可以發現這里devtool設成了false，沒有設置devserver，因為不是生產所需要的，所以沒有設置。

在你的入口的地方建立一個配置里的entry規定名字的js文件，就可以先跑一遍webpack。
如果webpack沒有報錯，就說明你的配置基本是對的。

接下來，我會就angular 1.x 用webpack打包打包遇到的坑來說一說，請看下一篇文章：

基于webpack構建的angular 1.x工程（angular篇）

想看詳細代碼，可以訪問我的項目地址
https://github.com/homerious/angular-ionic-webpack

有什么問題或者不對的地方歡迎指出，謝謝閱讀！

本文原創，未經授權請勿轉載。