澳门新浦京8455com十四、archetype

澳门新浦京8455com 5

此间根本记录一下用gulp来合并、压缩CSS以致开展MD5取名以致替换文件中引入的CSS文本,当然这一多级操作都以用基于gulp插件的,主要会用到上面包车型大巴多少个插件:

本章是《maven实战》最终一章啦,十六章走来,天天都在贯彻始终,同临时间也简要的记录了和睦每一日的一丝一毫,感激大家辅助,笔者会继续走下来,希望能在这里后给我们带来越发美貌的传说接下去自个儿准备向《高质量MySQL》进军啦,大概进程中笔记更新会不定时,可是自身也许会依照章节的办法记录每一章入眼并展现给大家,所从前方路途虽远,但坚称正是大捷,一齐加油吧!!!

本文珍视陈述怎么样一步一步搭建webpack工程化配置,这里提到到一些常用插件的使用以至node.js的文件操作。上篇文章介绍到,webpack配置成了三种格局,某一个人喜好将二种方式的代码放到区别的配置文件中,而本人更偏好全体并入到webpack.config.js里,因为这里有一对陈设是通用的。笔者将代码分为三块:基本配置、开拓方式配置、坐蓐格局配置。本文提议您有必然的webpack基本功,因为作者不会开销多量篇幅去传授每种loader、插件的求实用法。

varconcat=require(gulp-concat);//-多个文件合并为一个;varminifyCss=require(gulp-minify-css);//-压缩CSS为一行;varrev=require(gulp-rev);//-对文件名加MD5后缀varrevCollector=require(gulp-rev-collector);//-路径替换

澳门新浦京8455com 1forgive.jpg

主题配置

安装Gulp插件到地头品种

可以把archetype用作四个模板,当大家要创设一些门类的时候,能够通过轻便的maven一声令下就足以超快生成项目标骨架

中央一:多入口文件

假令你的花色是单页应用,只怕最终包装后仅独有二个js文件、多个css文件、多个html文件。在这里种意况,webpack配置起来并未太祸患度。可是假使项目有多进口(比方多页应用),那么配置起来就比较麻烦了。
您能够手写多个输入文件,但是这么做显明不活络:

entry:{
    entry1:'xxx1.js',
    entry2:'xxx2.js',
    entry3:'xxx3.js',
    ...
}

这样的话每趟你创制了新的输入文件都急需退换webpack.config.js。倒不比换一种沉凝:既然webpack是基于node.js的,直接鲜明好入口文件的目录构造然后遍历文件夹自动生成入口文件配置。

var jsPath = path.resolve(__dirname, 'entry');
var files = fs.readdirSync(jsPath);
var entry = {};
files.forEach(function(filename) {
    var stats = fs.statSync(path.join(jsPath, filename));
    if (stats.isDirectory()) {
        var entryJSKey = filename + '/' + 'main.js'.split('.js')[0];
        entry[entryJSKey] = path.join(jsPath, filename, '/' + 'main.js');
    }
})

var webpackConfig = {
    entry: entry
}
npminit//-生成一个package.json,里面是一些常规的配置信息npminstallgulpgulp-concatgulp-minify-cssgulp-revgulp-rev-collector--save-dev//-安装插件到项目目录内

采取archetype的相通步骤

mvn archetype:generate,mvn会列出三个列表供客户筛选

澳门新浦京8455com 2archetype项目列表.png

以此列表来自archetype-catalog.xml文件,在继续操作中,客商必要提供一些通用的基本参数,首要有groupId,artifactId,version,package,这样archetype插件就能够转移项目标龙骨了

批管理格局分歧在于运用上述命令时直接把参数给出去,同一时间利用-B参数须求archetype插件以批管理的法子运转,不过须求客商展现给出archetype的坐标消息

mvn archetype:generate -B -DarchetypeGroupId=org.apache.maven.archetypes -DarchetypeArtifactId=maven-archetype-quickstart -DarchetypeVersion=1.0 -DgroupId=com.zheng.mavenstudy-DartifactId=archetype-test -Dversion=1.0-SNAPSHOT -Dpackage=com.zheng.mavenstudy

骨干二:推断当前支出境况

我们来判别一下脚下的开垦条件,process.env.NODE_ENV能够赢获得命令行中输入的NODE_ENV的值,大家将其定义为production:

var DefinePlugin = webpack.DefinePlugin;
var isDevelopment = process.env.NODE_ENV !== 'production';

至今来安排一下输入路线。为了有利于援用,笔者将出口路线定义为与进口文件同级,文件的命名与进口文件一律,后缀决意于当前的情状。

var webpackConfig = {
    entry: entry,
    output: {
        path: jsPath,
        filename: isDevelopment ? '[name].__bundle.js' : '[name].bundle.js',
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify(process.env.NODE_ENV),
            }
        })
    ]
}

成功地点两步后,会在咱们的品类内生成二个package.json文件以致叁个node_modules目录

常用的archetype介绍

maven-archetype-quickstart默认值
常用于通常javase品类构造maven-archetype-webapp
用于web项目布局appfuse archetype``appfuse是七个集成了成都百货上千开源工具的类型,在于支持技术员飞快高效的创办项目,它提供了汪洋archetype,方便客商选拔各类别型的档案的次序

着力三:提取公共文件

骨子里项目中有不菲公家的公文,将那些文件全都打包到每贰个输入文件里显眼不相符,因而大家应用CommonsChunkPlugin插件将国有文件和输入文件分别打包。

var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
var commonModule1 = path.resolve(__dirname, 'common' + '/app');
//替换掉上面的var entry = {}
var entry = {
    vendor: [commonModule1]
}

var webpackConfig = {
    entry: entry,
    externals: isDevelopment ? {} : externals,
    plugins: [
        new CommonsChunkPlugin({
            name: ['vendor'],
            filename: isDevelopment ? 'vendor.__bundle.js' : 'vendor.bundle.js',
            minChunks: Infinity
        })
    ]
}

创造布局文件 gulpfile.js

编辑自身的archetype项目

一个archetype-maven品种须要蕴含以下多少个至关心注重要部分pom.xml
archetype自身的pom澳门新浦京8455com,src/main/resources/archetype-resources/pom.xml
基于该archetype改造的连串pom原型src/main/resources/META-INF/maven/archetype-metadata.xml
archetype的陈述符文件src/main/resources/archetype-resources/
别的需求包蕴在archetype连串中的内容主导结构如下

澳门新浦京8455com 3自定义archetype项目构造.png

archetypepom.xml文件,用于定义archetype体系的坐标archetype-test/pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.zheng.archetypestudy</groupId> <artifactId>archetype-test</artifactId> <version>1.0-SNAPSHOT</version></project>

变动的项目pom.xml用来描述生成项目中隐含的一部分布置,包涵参数、注重等,个中groupId,artifactId,version使用了品质替换文件坐落于archetype-test/src/main/resources/archetype-resources/pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>${groupId}</groupId> <artifactId>${artifactId}</artifactId> <version>${version}</version> <packaging>jar</packaging> <name>${artifactId}</name> <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.12</version> </dependency> </dependencies> <build> <pluginManagement> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>3.6.1</version> <configuration> <source>1.8</source> <target>1.8</target> </configuration> </plugin> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-resources-plugin</artifactId> <version>2.6</version> <configuration> <encoding>UTF-8</encoding> </configuration> </plugin> </plugins> </pluginManagement> </build></project>

archetype-metadata.xml文件,用于描述archetype品类什么文件夹及目录供给被引进到花色中位居archetype-test/src/main/resources/META-INF/maven/archetype-metadata.xml其间通过fileSets安装了要求被用于项目中的文件,通过filtered,packaged独家设置钦赐目录下满含的文本是不是须要属性值替换,同一时候对应的目录是或不是供给生成包目录

<?xml version="1.0" encoding="UTF-8"?><archetype-catalog xsi:schemaLocation="http://maven.apache.org/plugins/maven-archetype-plugin/archetype-catalog/1.0.0 http://maven.apache.org/xsd/archetype-catalog-1.0.0.xsd" xmlns="http://maven.apache.org/plugins/maven-archetype-plugin/archetype-catalog/1.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <fileSets> <fileSet filtered="true" packaged="true"> <directory>src/main/java</directory> <includes> <include>**/*.java</include> </includes> </fileSet> <fileSet filtered="true" packaged="true"> <directory>src/test/java</directory> <includes> <include>**/*.java</include> </includes> </fileSet> <fileSet filtered="true" packaged="false"> <directory>src/main/resources</directory> <includes> <include>**/*.properties</include> </includes> </fileSet> </fileSets> <requiredProperties> <requiredProperty key="groupId"> <defaultValue>com.zheng.archetypestudy</defaultValue> </requiredProperty> </requiredProperties></archetype-catalog>

上边配置的src/main/java,src/test/java,src/main/resources,分别针对目的项指标src/main/java,src/test/java,src/main/resources对应于archetype-test项目的archetype-test/src/main/resources/archetype-resources/src/main/java``archetype-test/src/main/resources/archetype-resources/src/test/java``archetype-test/src/main/resources/archetype-resources/src/main/resources其间布置的src/main/java目录,选取通配符格局富含全部当前包及其子包下的java文本,最后出今后指标项目project-name/src/main/java/[package-name]/**/*.java

自定义的一对品种文件archetype-test/src/main/resources/archetyperesources/src/main/java/dao/BaseDao.java

package ${package}.dao;import java.io.Serializable;import java.util.List;/** * 基础数据接口 * Created by zhenglian on 2017/8/21. */public interface BaseDao<T> { void save; void update; int delete(Serializable id); T findById(Serializable id); List<T> findAll();}

注意上边package引进通过${package}变量名方式,那样能够通过在命令行时动态钦点,结合地方所提供的archetype-metadata.xml安顿,对点名文件进行变量替换archetype-test/src/main/resources/archetype-resources/src/main/java/service/BaseService.java

package ${package}.service;import java.io.Serializable;import java.util.List;/** * 基础服务接口 * Created by zhenglian on 2017/8/21. */public interface BaseService<T> { void save; void update; int delete(Serializable id); T findById(Serializable id); List<T> findAll();}

陈设实现后,项目完全构造如上边给出的图所示,通过mvn clean installarchetype连串打包到本地酒馆中那样就足以由此mvn archetype:generate命令使用本地成立的archetype花色构造了mvn archetype:generate -DarchetypeGroupId=com.zheng.archetypestudy -DarchetypeArtifactId=archetype-test -DarchetypeVersion=1.0-SNAPSHOT

瞩目在运维该命令的时候,如若是在archetype-test品种根目录下,那么会报错,提醒Unable to add module to the current project as it is not of packaging type 'pom',表达当前创办的花色为模块项目,而父级目录不是贰个pom品种的体系,所以报错在上顶尖目录下运作即可

澳门新浦京8455com 4自定义archetype运营结果.png

基本四:是或不是必要将框架打包进来

webpack暗中同意景况下会将进口文件(富含它的子模块)注重的兼具模块全部装进进来,那会形成打包后的文件特别华而不实,那在支付条件下得以担任,不过生产条件下就差异意了。经常的操作是:开拓碰着下二次性全体打包,生产条件下框架、库等比较宏大的第三方模块不开展打包,转而选用cdn。

var externals = {
    'angular': 'angular',
    'react': 'React',
    'react-dom': 'ReactDOM'
}

var webpackConfig = {
    ...
    externals: isDevelopment ? {} : externals
}

Externals对象的key是框架的名字,value是你import时的变量名。比如,cdn上的react名称叫react.js(或react.min.js),key就为”react”。在代码中本身动用import React from 'react',因而value是“React”。上述代码只是比方表达,实际上超级少有品种会同不平日候要求利用react和angular。

在品种根目录内创造贰个gulpfile.js文件(必须是其一文件名哟~State of Qatar,内容正是上边多少个插件的配备新闻:

archetypeCatalog

在使用maven-archetype-plugin插件时,会博得四个列表供接收,那一个列表的消息来源三个名叫archetype-catalog.xml的文本顾客能够自定义这么些archetype-catalog.xml中的内容,当然也得以透过扫描本地酒店自动生成基于该饭馆的archetype-catalog.xml文本那么archetype-catalog.xml计划文件是从哪个地方来的啊,maven中有以下两种选拔:internal
maven内置的archetypeCataloglocal
指向客商本地的archetype catalog,其岗位为C:UsersAdministrator.m2archetype-catalog.xml,可是该公文暗许是不设有的remote
指向了maven中心饭店的archetype catalog,具体地址为http://repo1.maven.org/maven2/archetype-catalog.xmlfile://…
客商能够钦定本机任何地点的archetype-catalog.xml文件http://…
客商能够使用http共谋钦定远程的archetype-catalog.xml文本上边两种方法能够通过mvn archetype:generate命令的时候,使用archetypeCatalog点名插件使用的catalog,例如:mvn archetype:generate -DarchetypeCatalog=local

澳门新浦京8455com 5利用本机archetypecatalog.png

上面的local钦赐使用C:UsersAdministrator.m2archetype-catalog.xml布局文件

<?xml version="1.0" encoding="UTF-8"?><archetype-catalog xsi:schemaLocation="http://maven.apache.org/plugins/maven-archetype-plugin/archetype-catalog/1.0.0 http://maven.apache.org/xsd/archetype-catalog-1.0.0.xsd" xmlns="http://maven.apache.org/plugins/maven-archetype-plugin/archetype-catalog/1.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <archetypes> <archetype> <groupId>org.apache.maven.archetypes</groupId> <artifactId>maven-archetype-mojo</artifactId> <version>1.0</version> <description>plugin</description> </archetype> <archetype> <groupId>org.apache.maven.archetypes</groupId> <artifactId>maven-archetype-quickstart</artifactId> <version>1.0</version> <description>quickstart</description> </archetype> <archetype> <groupId>org.apache.maven.archetypes</groupId> <artifactId>maven-archetype-quickstart</artifactId> <version>1.1</version> <description>quickstart</description> </archetype> <archetype> <groupId>org.apache.maven.archetypes</groupId> <artifactId>maven-archetype-webapp</artifactId> <version>1.0</version> <description>webapp</description> </archetype> <archetype> <groupId>org.appfuse.archetypes</groupId> <artifactId>appfuse-modular-spring</artifactId> <version>2.0</version> <description>appfuse-modular-spring</description> </archetype> </archetypes></archetype-catalog>

上面的archetype-catalog.xml是因而扫描本地仓库自动生成的,可以通过mvn archetype:crawl来浏览当前地面饭馆的门类组织,暗中认可会生成到本地旅社(localRepository卡塔尔配置的根目录下当然也得以透过-Drepository点名地方客栈地点,-Dcatalog点名生成的archetype-catalog.xml更换的办法mvn archetype:crawl -Drepository=G:/workspace/repository -Dcatalog=C:/Users/Administrator/.m2/archetype-catalog.xml假若未有一点点名-Drepository参数时,maven会通过settings.xml中配备的本地饭馆进行分析

因此学习地方,笔者深信大家应该能够通过自定义本人的archetype来生成归属本人的品种骨架啦,赶紧动起来呢!

核心五:加载器

Babel-loader是最常用的,style-loader和css-loader会依据情况的区别分别布置。你能够依附本身的类型加载更加多的loader,例如url-loader、file-loader、sass-loader等。

var webpackConfig = {
    ...
    module: {
        rules: [{
            test: /.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['es2015', 'stage-2']
                }
            }
        }]
    }
    ...
}
vargulp=require(gulp);varconcat=require(gulp-concat);//-多个文件合并为一个;varminifyCss=require(gulp-minify-css);//-压缩CSS为一行;varrev=require(gulp-rev);//-对文件名加MD5后缀varrevCollector=require(gulp-rev-collector);//-路径替换gulp.task(concat,function(){//-创建一个名为concat的taskgulp.src([./css/wap_v3.1.css,./css/wap_v3.1.3.css])//-需要处理的css文件,放到一个字符串数组里.pipe(concat(wap.min.css))//-合并后的文件名.pipe(minifyCss())//-压缩处理成一行.pipe(rev())//-文件名加MD5后缀.pipe(gulp.dest(./css))//-输出文件本地.pipe(rev.manifest())//-生成一个rev-manifest.json.pipe(gulp.dest(./rev));//-将rev-manifest.json保存到rev目录内});gulp.task(rev,function(){gulp.src([./rev/*.json,./application/**/header.php])//-读取rev-manifest.json文件以及需要进行css名替换的文件.pipe(revCollector())//-执行文件内css名的替换.pipe(gulp.dest(./application/));//-替换后的文件输出的目录});gulp.task(default,[concat,rev]);

支出条件布署

在开荒条件下大家必要:将css打包到js中;为了便于调节和测验,供给映射打包后的代码和源代码;帮忙热更新;确定保障编写翻译的代码对的误,若现身错误将其记录;编写翻译成功后自动展开页面。

运维结果

创办服务器

得益于webpack-dev-server,大家得以像node.js雷同创设服务器。大家将服务器的剧情定义到pages中。在服务运作后,打包后的文件就能够冒出在内部存款和储蓄器里,路线仿效自contentBase,也便是pages。

var htmlPath = path.resolve(__dirname, 'pages');
var webpackConfig = {
    ...
    devServer: {
        hot: true,
        inline: true,
        progress: true,
        contentBase: htmlPath,
        port: 3000,
        stats: {
            colors: true
        }
    }
    ...
}

通过以上的安顿之后,就足以起始运维gulp对大家的品种展开相关的操作啦;

在着力配置上加多开拓遭受布署

大家先增加css模块的加载:

if (isDevelopment) {
    var cssLoader = {
        test: /.css$/,
        use: ['style-loader', 'css-loader']
    };
    webpackConfig.module.rules.push(cssLoader);
}

试想一下,在尚未公文映射的景况下展耗费付是何等恐怖的一件事:你的代码都被打包到了最终的js文件里,由于js混合了框架、库、css、babel转码,能够说假诺现身谬误是很难定位的。为此,我们需求完成打包后的文件与源文件之间的内容映射,现身难题后得以直接固定到源文件的对应地方。

webpackConfig.devtool = 'source-map';

笔者们还要扶助热更新、无错保障、自动张开页面:

var OpenBrowserPlugin = require('open-browser-webpack-plugin');
var HotModuleReplacementPlugin = webpack.HotModuleReplacementPlugin;
var NoEmitOnErrorsPlugin = webpack.NoEmitOnErrorsPlugin;
//假设默认开启的页面位于./pages/entryPages
webpackConfig.plugins = webpackConfig.plugins.concat([
    new HotModuleReplacementPlugin(),
    new NoEmitOnErrorsPlugin(),
    new OpenBrowserPlugin({
        url: 'http://localhost:3000/entryPages/index.html'
    })
]);

使用gulp命令,运行Gulp.js营造程序

生产条件布署

在临蓐意况下我们必要:压缩代码;分离css和js;我们依旧足以将包裹后的文件自动引进到html中。

第一运维concat这个task变化两个rev-manifest.json文件然后再运营rev这个task交替掉文件中引入的css

分离CSS和JS

第一是分开css和js,这里需求用到extract-text-webpack-plugin这几个插件。

if (isDevelopment) {
    ...
}
else {
    var cssLoader = {
        test: /.css$/,
        use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: 'css-loader'
        })
    };
    webpackConfig.module.rules.push(cssLoader);
    webpackConfig.plugins = webpackConfig.plugins.concat([
        new ExtractTextPlugin('main.bundle.css', {
            allChunks: false
        })
    ])
}

目测文件的辞别是打响了,css被提取到了js中。可是你会发觉,整个输出目录里独有三个main.bundle.css,可是本身分化的入口文件依赖了不一致的css。一本人的假如是怀有import进来的css被统一到了main.bundle.css中,张开css文件后本人意识,main.bundle.css里面独有最后叁个入口文件导入的css,而早先的css内容总体被隐讳了。

假若将来有四个入口js:

//main1.js
import '../css/main1.css';

//main1.css
body: { background: red }

//main2.js
import '../css/main2.css';

//main2.css
body: { background: blue }

最后的main.bundle.css唯有main2.css里面包车型大巴开始和结果:

//main.bundle.css
body: { background: blue }

由来是webpack在暌违css的时候参谋自entry的安顿,从当中提取css文件,依据new ExtractTextPlugin('main.bundle.css',{...})的率先个参数生成提取后的css文件。由于文件的名字均为main.bundle.css,文件会被每一个替换,导致的结果便是领抽出来的css独有最后七个entry所注重的剧情。

解决方案与output相像,大家因此node.js遍历文件目录自动生成了诸如

{
    "page1/main": "./entry/page1/main.js",
    "page2/main": "./entry/page2/main.js",
    "page3/main": "./entry/page3/main.js",
}

的入口文件配置,大家可以动用[name]来获取到entry里面包车型地铁key,将css命名设置为key,这样一来webpack就能依附key值在page1、2、3…的上面生成main.bundle.css了。

webpackConfig.plugins = webpackConfig.plugins.concat([
    new ExtractTextPlugin('[name].bundle.css', {
        allChunks: false
    })
])
YuanWingdeMacBook-Pro:mYuanWing$gulpconcat[11:47:02]Usinggulpfile~/SVN/JKD/m/gulpfile.js[11:47:03]Startingconcat...[11:47:03]Finishedconcatafter12msYuanWingdeMacBook-Pro:mYuanWing$gulprev[11:47:17]Usinggulpfile~/SVN/JKD/m/gulpfile.js[11:47:17]Startingrev...[11:47:17]Finishedrevafter10msYuanWingdeMacBook-Pro:mYuanWing$

代码压缩

接下去咱们将代码实行减削,使用到了UglifyJsPlugin这几个插件,被分离的css文件私下认可意况下不会被减少,须要额外用到optimize-css-assets-webpack-plugin这么些插件。

webpackConfig.plugins = webpackConfig.plugins.concat([
    new UglifyJsPlugin({
        minimize: true,
        output: {
            comments: false,
        },
        compress: {
            warnings: false
        }
    }),
    new ExtractTextPlugin('[name].bundle.css', {
        allChunks: false
    }),
    new OptimizeCSSPlugin()
]);

rev-manifest.json文件内容:

电动引进打包后的文书

终极,谈一下哪些促成html自动引进打包后的文件。在webpack中html-webpack-plugin插件能够自动生成html页面,大家得以在为其内定模板为进口页面。为了得以达成生成五个html页面,须要创设多少个HtmlWebpackPlugin对象,这一步笔者将其坐落了文件操作里面。每一种页面包车型大巴名号与pages里面包车型客车各html相符,那样一来,生成的html页就能够已原页面为模板,增多打包后的公文并覆盖原页面。

var HtmlWebpackPlugin = require('html-webpack-plugin');
var jsPath = path.resolve(__dirname, 'entry');
var files = fs.readdirSync(jsPath);
var entry = {};
files.forEach(function(filename) {
    var stats = fs.statSync(path.join(jsPath, filename));
    if (stats.isDirectory()) {
        var entryJSKey = filename + '/' + 'main.js'.split('.js')[0];
        entry[entryJSKey] = path.join(jsPath, filename, '/' + 'main.js');
        if (!isDevelopment) {
            var template = path.resolve(__dirname, 'pages', filename, 'index.html')
            var htmlPlugin = {
                filename: template,
                template: template,
                chunks: [],
                inject: true,
                chunksSortMode: 'manual',
                xhtml: true,
                showErrors: true,
                minify: false
            };
            htmlPlugin.chunks = ['vendor', entryJSKey];
            htmlPluginArr.push(new HtmlWebpackPlugin(htmlPlugin));
            }
    }
})

上边的构造有多个关键点:1.钦定各类页面要求活动引进的模块名称。暗中认可情形下,新生成的页面会把具备打包后的文书全体引进,在多页面使用下是不可取的,大家意在每一种页面只引进与本页面有关的打包文件。各个页面打包后的js名字未有不一样的,不过路径是见智见仁的,因而大家定义每种页面要求引进的js名叫filename + '/' + 'main.js'.split('.js')[0],然后在chunks里钦赐供给加载的模块htmlPlugin.chunks = ['vendor', entryJSKey]。2.作保js的引进顺序。Vendor作为全局的通用代码,它必要在main早先被引入。Vendor和main应该都被引进在body的结尾面。因而,大家将inject设置为true(body),将
chunksSortMode设置为manual,确定保证chunks数组的相继['vendor', entryJSKey]

{wap.min.css:wap.min-c49f62a273.css}

运行

Webpack的构造已经达成,以后事实上就足以使用到骨子里项目中了。

header.php轮番前后相比较:

使用Webpack命令

大家得以经过以下二种命令施行webpack配置:

//开启服务器并执行开发模式配置
webpack-dev-server
//打包开发模式配置
NODE_ENV=development webpack
//打包生产模式配置
NODE_ENV=production webpack

下边大家来精短一下地点八个指令,使用到了cross-env这一个插件npm install cross-env。得益于package.json,大家改革一下script字段:

//package.json
"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "webpack-dev-server",
    "build": "NODE_ENV=production webpack",
    "dev": "NODE_ENV=development webpack"
  }

现行反革命一向运营npm start,你会发掘服务成功运转了。但是运维npm run buildnpm run dev在windows下会报“NODE_ENV不是此中或外界命令”。为了缓和该难题,cross-env就派上用处了:

//package.json
"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "webpack-dev-server",
    "build": "cross-env NODE_ENV=production webpack",
    "dev": "cross-env NODE_ENV=development webpack"
  }

再一次运维npm run buildnpm run dev,打包成功。

气势磅礴一时间的话能够将上述配置封装成cli,特别有益于开拓职员使用。

替换前:link rel=stylesheet href=/css/wap.min.css /

11月23日更新(新增mock服务)

Mock服务能够阻挡钦命的伸手,重临使用者定义的多少来落成上下端抽离式开辟。通过写代码的点子安顿mock的接口而不是很方便,由此作者引入应用mock2easy-middleware以个中间件。你能够访问文档来查看具体的结构项。

//安装
npm install mock2easy-middleware --save-dev

//webpack.config.js
var mock2easy = require('mock2easy');
//mock服务器配置
var mockConfig = {
    port: 3005,
    lazyLoadTime: 3000,
    database: 'mock2easy',
    doc: 'doc',
    ignoreField: [],
    interfaceSuffix: '.json',
    preferredLanguage: 'en'
};
mock2easy(mockConfig, function (app) {
    app.listen(mockConfig.port, function () {
        console.log('mockServer has started , see : localhost:' + mockConfig.port);
    });
});

由于近期的服务器地址为webpack-dev-server中的3000,我们供给将具备的央浼都代理到mock服务器上(3005)并同意https诉求。

devServer: {
    ...
    proxy:{
        '/*.json':{
            target:'http://localhost:3005'
            secure:false
         }
    }
}

替换后:link rel=stylesheet href=/css/wap.min-c49f62a273.css /

gulp-rev-collector拓宽文件路线替换是依靠rev-manifest.json的,所以要先成生.json文本,然后再张开沟通;

结语

地点用到的多少个插件都只用到了他们自己职能异常的小非常的小的一部份,感兴的可以本身去好好心得一下:

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图