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/