webpack项目初始化和基于模块的脚手架搭建

一、前期准备

1、项目初始化

2、git建立,参考见:https://my.oschina.net/u/3018050/blog/1587771

3、npm初始化及相关插件安装,参考见:https://my.oschina.net/u/3018050/blog/1593394

这部分比较多,只罗列可能需要安装的插件

4、webpack一些配置和设置

二、需要执行的命令

1、发布前dev模式的服务启动

develop开发者版本

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

2、发布后online模式的服务启动

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

访问页面:

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

3、简化模式修改

  "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就可以用行了。

当然也可以重启计算机,进程自然被关闭掉,再进入。

三、部分代码-包含外部引入的通用模块部分

1、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;

2、项目目录结构

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/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏linux运维学习

linux学习第二十八篇:监控io性能,free命令,ps命令,查看网络状态,linux下抓包

监控磁盘io性能 (命令:iostat,iotop) 查看磁盘读写状态: iostat -x %util:表示io等待,也就是磁盘使用占用cpu百分比。...

6429
来自专栏进击的程序猿

raft 系列解读(2) 之 测试用例raft 系列解读(2) 之 测试用例

基于mit的6.824课程,github代码地址:https://github.com/zhuanxuhit/distributed-system

1482
来自专栏desperate633

TCP协议浅析TCP概述TCP可靠数据传输TCP流量控制TCP连接管理

上图我们进行一个分析,以便搞清楚tcp序列号和ack的应用 首先,hostA作为发送方给B发送数据,随机选择一个序列号seq = 42,也就是这段segmen...

1272
来自专栏耕耘实录

关于FTP主动模式与被动模式的一点理解

版权声明:本文为耕耘实录原创文章,各大自媒体平台同步更新。欢迎转载,转载请注明出处,谢谢

1232
来自专栏Android开发经验

升级Android支持库版本遇到的两个问题

1182
来自专栏北京马哥教育

记一次惊心的网站 TCP 队列问题排查经历

1715
来自专栏吴伟祥

什么是 WinSCP 转

WinSCP 是一个 Windows 环境下使用的 SSH 的开源图形化 SFTP 客户端。同时支持 SCP 协议。它的主要功能是在本地与远程计算机间安全地复制...

1651
来自专栏xcywt

WireShark 使用

1、干货 Wireshark(前称Ethereal)是一个网络封包分析软件。网络封包分析软件的功能是撷取网络封包,并尽可能显示出最为详细的网络封包资料。Wire...

2389
来自专栏北京马哥教育

十二条Linux运维面试必备经典笔试/面试题,来挑战一下!

又到了一年一度的秋招,作为运维方向,看了一些面经,收集了一些笔试面试题,总结了一下,贴出来仅供参考,有错误的地方还请指出. 1.Linux设置环境变量 暂时的:...

4919
来自专栏xcywt

TCP头部分析与确认号的理解

1、TCP的特点: 基于字节流 面向连接 可靠传输 缓冲传输 全双工 流量控制 2、头部格式和说明 图源百度。如下图示,就是TCP包的头部结构。可以看到这个头部...

33210

扫码关注云+社区

领取腾讯云代金券