webpack項目初始化和基於模塊的腳手架搭建

1、前期準備

一、項目初始化

二、git創建，參考見：http://www.javashuo.com/article/p-nzmeuwxj-es.html

三、npm初始化及相關插件安裝，參考見：http://www.javashuo.com/article/p-qqdtjmkq-gk.html

這部分比較多，只羅列可能須要安裝的插件

四、webpack一些配置和設置

2、須要執行的命令

一、發佈前dev模式的服務啓動

develop開發者版本

webpack-dev-server --inline --port 8088

二、發佈後online模式的服務啓動

WEBPACK_ENV=online webpack-dev-server --inline --port 8088

訪問頁面：

http://localhost:8088/dist/view/index.html

三、簡化模式修改

"scripts": {
    "dev" :"WEBPACK_ENV = webpack-dev-server --inline --port 8088",
    "dev_win" :"set WEBPACK_ENV=dev && webpack-dev-server --inline --port 8088",
    "dist":"WEBPACK_ENV=online webpack -p",
    "dist_win":"set WEBPACK_ENV=online && webpack -p"
  },

package.json裏面修改腳本啓動方式

npm run dev_win

 

問題：npm run dev 運行後，按住ctrl+c退出後，再輸入npm run dev會報錯 

緣由是：雖然「ctrl+c」退出了當前窗口，可是進程一直在運行佔用，8080端口（默認，上圖爲修改的8088端口）一直被node.exe佔用，若是修改配置（webpack.config.js），須要從新啓動端口的話，必須先查找8080佔用的進程pid，kill這個pid後方可。

修改啓動爲8080端口：

修改後將和webpack-dev-server用一個8080端口

具體方法以下：

（1）查看8080端口占用狀況：

netstat -ano|findstr 8080

（2）查看8080端口pid的佔用程序

tasklist|findstr "6400"

windows方法截圖

（3）關閉端口8080的佔用

C:\>taskkill /f /t /im node.exe

（4）從新啓用npm run dev_win

看到success就能夠用行了。

固然也能夠重啓計算機，進程天然被關閉掉，再進入。

 

3、部分代碼-包含外部引入的通用模塊部分

一、webpack.config.js

/*
* @Author: xiaoge
* @Date:   2017-12-09 22:21:43
* @Last Modified by:   Marte
* @Last Modified time: 2017-12-26 16:11:47
*/
var path              = require('path');
var webpack           = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');

// 環境變量的設定
var WEBPACK_ENV       = process.env.WEBPACK_ENV || 'dev_win';
console.log(WEBPACK_ENV);
var getHtmlConfig=function (name) {
    return{
        template    :'./src/view/'+ name +'.html',
        filename    :'view/'+ name +'.html',
        inject      :true,
        hash        :true,
        chunks      :['common',name]
    }
}
var config = {
    entry: {
        // 頭部仍是存在怎麼去掉？
        'common': ['./src/page/common/index.js'],
        'index' : ['./src/page/index/index.js'],
        'login' : ['./src/page/login/index.js'],
    },
    output: {
        path: './dist',
        // path:path.resolve(__dirname, './dist'),
        publicPath:'/dist/',
        filename: 'js/[name].js'
    },
    externals: {
        'jquery': 'window.jQuery'
    },
    module:{
        loaders: [
            {test: /\.css$/,loader:  ExtractTextPlugin.extract("style-loader","css-loader")},
            // {test: /\.jpg$/,loader:  ExtractTextPlugin.extract("style-loader","url-loader")},
            { test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=100&name=resource/[name].[ext]' },
        ]
    },
    resolve : {
        alias : {
            util    : __dirname + '/src/util',
            page    : __dirname + '/src/page',
            service : __dirname + '/src/service',
            image   : __dirname + '/src/image'
        }
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            filename: 'js/base.js'
        }),
        new ExtractTextPlugin("css/[name].css"),
        new HtmlWebpackPlugin(getHtmlConfig('index')),
        // new HtmlWebpackPlugin({
        //     template        :'./src/view/index.html',
        //     filename        :'view/index.html',
        //     inject          :true,
        //     hash            :true,
        //     chunks          :['common','index']
        // }),
    ]
 };

 if('dev_win'===WEBPACK_ENV){
    config.entry.common.push('webpack-dev-server/client?http://localhost:8088/')
 }
module.exports = config;

二、項目目錄結構

3.index.js引入

var _mm=require('util/mm.js');

// 有報錯，還沒解決
_mm.request({
    url:'/product/list.do',
    success:function (res) {
        console.log(res);
    },
    error: function (errMsg) {
        console.log(errMsg)
    }
})

啓動fiddler代理

刷新頁面後發現，可以找到接口文件，但同時jquery的文件報錯

點擊報錯位置，許可能是沒加「,」之類的。

本次報錯：代理軟件AutoRespond裏被劫持的網址使用須要打對勾。

 

附加：

fildder軟件的正則匹配書寫：

REGEX:http://localhost:8080/user/(.*)
http://www.happymmall.com:80/user/$1

或者：

REGEX:http://localhost:8088/user/*
http://www.happymmall.com:80/user/