webpack模块化开发

1-------基本开发

项目环境搭建好后，我们需要做基本的开发设置，包括webpack.config.js的配置，一般为了方便开发有以下的固定模块可以供参考:

* @Author: 琼歌先生

* @Date: 2018-07-30 14:07:03

* @Last Modified by: lastName.琼歌先生

* @Last Modified time: 2018-07-31 16:51:19

//-----------------------------------------载入---------------------------------------------------------------

var webpack = require('webpack');

var ExtractTextPlugin = require('extract-text-webpack-plugin');

var HtmlWebpackPlugin = require('html-webpack-plugin');

// 环境变量配置，以此区分是dev / online环境，通过配置可以使得

var WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev';

console.log("部署的环境:" + WEBPACK_ENV);

//------------------------------------------公共方法----------------------------------------------------------

// 获取html-webpack-plugin参数的方法

var getHtmlConfig = function (name, title) {

console.log("启动对象:getHtmlConfig 以设置统一参数");

return {

filename: 'view/' + name + '.html', //编译后的文件放置的位置

favicon: './favicon.ico',

title: title, //标题

inject: true, //是否自动引入

hash: true, //是否设置hash

chunks: ['common', name] //引入的模块

};

//-------------------------------------webpack config对象----------------------------------------------------

var config={

entry: { //入口文件，配置需要访问的页面

'common': './src/page/common/index.js',

'index': './src/page/index/index.js',

//'list': './src/page/list/index.js',

//'detail': './src/page/detail/index.js',

//'cart': './src/page/cart/index.js',

//'order-confirm': './src/page/order-confirm/index.js',

//'order-list': './src/page/order-list/index.js',

//'order-detail': './src/page/order-detail/index.js',

//'payment': './src/page/payment/index.js',

//'user-login': './src/page/user-login/index.js',

//'user-register': './src/page/user-register/index.js',

//'user-pass-reset': './src/page/user-pass-reset/index.js',

//'user-center': './src/page/user-center/index.js',

//'user-center-update': './src/page/user-center-update/index.js',

//'user-pass-update': './src/page/user-pass-update/index.js',

//'result': './src/page/result/index.js',

//'about': './src/page/about/index.js',

output: { //输出文件

* 【改动】：删除path的配置，在webpack4中文件默认生成的位置就是/dist,

* 而publicPath和filename特性的设置要保留

// path : __dirname + '/dist/',//存放文件时候的路径

publicPath: 'dev' === WEBPACK_ENV ? '/dist/' : '//s.happymmall.com/MMALL_NEW/dist/', //访问文件时候的路径

filename: 'js/[name].js'

externals: { //设置jquey模块,以后的jquery可以直接在页面引用

'jquery': 'window.jQuery'

module:{//处理加载的样式

rules: [ //以前的loader加载器字段换为rules字段,用来放各种文件的加载器

// css文件的处理：css的加载方式

{

test: /\.css$/,

use: ExtractTextPlugin.extract({ //用于抽离css到单独的模块中

fallback: "style-loader",

use: "css-loader"

})

// 模板文件的处理：文件的加载方式

{

test: /\.string$/,

use: {

loader: 'html-loader',//安装依赖

options: {

minimize: true,

removeAttributeQuotes: false

}

// 图片的配置：图片的加载方式和字体文件分开

{

test: /\.(png|jpg|gif)$/,

use: [{

loader: 'url-loader', //图片的依赖，正常逻辑会生成一个base64的串部署在css中

options: {

* 【改动】：图片小于2kb的按base64打包

limit: 2048, //小于该kb值会变成base64

}

}]

// 字体图标的配置：字体文件的加载方式变化

{

use: [{

loader: 'url-loader',

options: {

limit: 8192,

}

}]

}

//追加位置

]

/**

* 正常情况下，我们如果需要在js页面引用工具类，那么我们需要执行类似：

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

* 这样的操作会使得页面出现很多的冗余，并且很难看, 因此我们可以设置将某些页面路径给全局化resolve

* 请求方式：require('util/mm.js'),require会自觉去匹配util的路径并自动内部补充

resolve: {

alias: {

node_modules: __dirname + '/node_modules', //指向当前路径，以后请求则变成

util: __dirname + '/src/util',

page: __dirname + '/src/page',

service: __dirname + '/src/service',

image: __dirname + '/src/image'

}

* 【新增】：webpack4里面移除了commonChunksPulgin插件，放在了config.optimization里面

* npm install extract-text-webpack-plugin --save - dev 用于独立出css样式

optimization: {

runtimeChunk: false,

splitChunks: {

cacheGroups: {

common: {

chunks: "all",

minChunks: 2

}

plugins: [

* 【移除】：webpack4里面移除了commonChunksPulgin插件

// // 独立通用模块到js/base.js

// new webpack.optimize.CommonsChunkPlugin({

// name : 'common',

// filename : 'js/base.js'

// }),

// 把css单独打包到文件里

new ExtractTextPlugin("css/[name].css"),//根据名字打包成不同的名称的css样式

// html模板的处理:html-webpack-plugin的方法会使得,不用再页面在写引入css,而是由系统自己去追加

new HtmlWebpackPlugin(getHtmlConfig('index', '首页')),

new HtmlWebpackPlugin(getHtmlConfig('list', '商品列表')),

//new HtmlWebpackPlugin(getHtmlConfig('detail', '商品详情')),

//new HtmlWebpackPlugin(getHtmlConfig('cart', '购物车')),

//new HtmlWebpackPlugin(getHtmlConfig('order-confirm', '订单确认')),

//new HtmlWebpackPlugin(getHtmlConfig('order-list', '订单列表')),

//new HtmlWebpackPlugin(getHtmlConfig('order-detail', '订单详情')),

//new HtmlWebpackPlugin(getHtmlConfig('payment', '订单支付')),

new HtmlWebpackPlugin(getHtmlConfig('user-login', '用户登录')),

//new HtmlWebpackPlugin(getHtmlConfig('user-register', '用户注册')),

//new HtmlWebpackPlugin(getHtmlConfig('user-pass-reset', '找回密码')),

//new HtmlWebpackPlugin(getHtmlConfig('user-center', '个人中心')),

//new HtmlWebpackPlugin(getHtmlConfig('user-center-update', '修改个人信息')),

//new HtmlWebpackPlugin(getHtmlConfig('user-pass-update', '修改密码')),

//new HtmlWebpackPlugin(getHtmlConfig('result', '操作结果')),

//new HtmlWebpackPlugin(getHtmlConfig('about', '关于MMall')),

* 【新增】：在v1.0.1版本中新增了devServer的配置，用自带的代理就可以访问接口

* npm install [email protected] 安装好后，启动完可以快速跟随你后端的改变前端自动改变

* 启动：webpack-dev-server --inline --port 8088

* 如何访问：当项目启动会有供一个路径，我们根据路径访问则可以

* 相当于:

* if('dev'=='WEBPACK_ENV'){

* config.entry.common.push('webpack-dev-server/client?http://localhost:8088/')

* }

devServer: {

port: 8088,

inline: true,

proxy: {

'**/*.do': {

target: 'http://test.happymmall.com',

changeOrigin: true

}

};

module.exports=config;

此处为基本的参数页面的，用于进行统一模块的设置和管理，

2------设置html页面：
在view页面建立layout文件夹，可以设置公共模块,如header.html，footer.html，nav.html等模块，通过将以一个页面的公关信息独立成通用的模块。

在view文件夹中建立index.html，用于以下格式，将公共模块给设置到页面中,方法如下:

<!DOCTYPE html>

<html>

<head>

<%= require('html-loader!./layout/header-common.html')%>

<title>项目测试啊</title>

</head>

<body>

<%= require('html-loader!./layout/nav.html') %>

<%= require('html-loader!./layout/header.html') %>

<%= require('html-loader!./layout/nav-side.html') %>

</div>

<%= require('html-loader!./layout/footer.html') %>

</body>

</html>>

3----设置Css页面与Js页面

在page文件夹中的common文件夹下，分别为各个模块建立文件夹，文件夹里面设置index.js和index.css。common文件下也建立layout.css和index.js页面作为对公共模块Js和Css信息的统一管理

layout.css页面负责全局化的样式信息

* @Author: 琼歌先生

* @Date: 2018-07-30 16:21:04

* @Last Modified by: lastName.琼歌先生

* @Last Modified time: 2018-07-31 14:18:53

/*设置统一样式，去除边角边界,清除样式*/

margin: 0;/*内边框*/

padding: 0;/*外边框**/

}

body{

background: #f6f6f6;

font: 12px/1.5 tahoma,arial,Microsoft YaHei ,sans-serif;/**行边距离1.5,字体*/

}

li{

list-style: none;/**消除原点*/

}

image{

display:block;

border: none;

}

label{

cursor: pointer;/**设置了标签上的鼠标形状*/

}

input[type='checkbox']{

cursor: pointer;

}

/*定宽布局*/

.w{

width:1080px;

margin:0 auto;/*保证乐儿与边缘无缝贴合*/

position: relative;/*设置相对定位的参照点*/

overflow: hidden;/*超出边界的不显示,同时清除浮动*/

}

/*全局通用样式*/

.hide{/*隐藏类*/

display: none;

}

/*超链样式*/

.link{

color: #999;

cursor: pointer;

text-decoration: none;/*无下划线*/

}

.link:hover{/*当连接被触碰*/

color: #e80012;

}

.link-text{

color: #999;

text-decoration: none;

}

/*btn通用*/

.btn{

display: inline-block;/**/

padding: 0 20px;

height: 40px;

line-height: 40px;/*与height保持一致，可以随时剧中*/

vertical-align: middle;/*防止样式冲突*/

background:#c60023;

font-size: 17px;

font-weight: bold;/*字体是否加粗*/

color: #fff;

outline: none;

cursor: pointer;

text-decoration: none;

}

.btn-min{

height: 25px;

line-height: 25px;

font-size: 12px;

padding: 0 10px;

/*迷你按钮,使用前继承按钮的特性class='btn btn-min'*/

}

/*布局加载--logo*/

.loading{

margin: 0 auto;/*宽度剧中,因为跟随可视宽度，什么时候都再页面中间*/

display: block;/*布局*/

width: 150px;

height: 100px;

border: 1px solid #ddd;/*1px的灰色边界*/

border-radius: 5px;

background: url(../../image/色猫.gif) no-repeat;/*此处不能使用js的缩写*/

opacity: 0.6;/**透明度*/

}

common文件夹下的index.js负责加载所有common文件夹中的index.css，每次新增common都需要在index.js中添加引用,

require('./layout.css');

require('node_modules/font-awesome/css/font-awesome.min.css');

require('page/common/footer/index.css');

require('page/common/header/index.css');

对于公共模块需要在common文件夹下各自建立文件夹，其中index.css和index.js则是针对模块本身：

以header模块为例子:

index.css如下：

* @Author: 琼歌先生

* @Date: 2018-07-31 13:59:43

* @Last Modified by: lastName.琼歌先生

* @Last Modified time: 2018-07-31 14:53:26

.header .logo{

position:absolute;/**改标签相当于一个钉子,会钉在提供秒面板的框里面,从此脱离页面，不参与其他框的位置,面板是定宽布局面板*/

left: 60px;

top: 34px;

display:block;/**块级元素*/

font-size: 36px;

color: #c60023;

text-decoration: none;

font-weight: bold;

}

.header .search-con{

padding: 40px 0 30px 250px;/*上右下左,而定宽布局去到哪里都是那么大*/

}

.header .search-con .search-input{

width: 550px;

height: 40px;

line-height: 40px;

font-size: 15px;

padding-left:10px;

border: 2px solid #c60023;

}

.header .search-con .search-btn{

position: absolute;

width: 80px;

height: 44px;

}

index.js如下：

* @Author: 琼歌先生

* @Date: 2018-07-30 22:11:21

* @Last Modified by: lastName.琼歌先生

* @Last Modified time: 2018-07-31 17:07:50

/*---------------------------------------------导入类---------------------------------------------------------*/

require('./index.css');

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

/*---------------------------------------------逻辑类---------------------------------------------------------*/

//通用页面头部

var header={

init :function(){/**初始化时候执行绑定的方法 */

this.bindEvent();

onLoad:function(){

var keyword=_mm.getUrlParam('keyword');

//回填输入框

if (keyword){

$('#search-input').val(keyword);

};

bindEvent: function () {

var _this=this;

//点击提交搜索按钮

$('#search-btn').click(function () {

_this.searchSubmit();

});

//输入后点击回车

$('#search-input').keyup(function(e){

if(e.keyCode==13){

_this.searchSubmit();

}

});

searchSubmit:function(){

alert('你好');

var keyword=$.trim($('#search-input').val());

if(keyword){

//跳转向list页面，然后附加参数

window.location.href='./list.html?keyword='+keyword;

}else{//如果关键字为空，直接返回首页

_mm.goHome();

}

};

header.init(); /*模块输出*/

猜你喜欢