详解webpack+express多页站点开发

2024-11-26 12:13:14

学习了webpack门级的教程后，觉得可能是专门为单页应用而量身打造的，比如webpack+react、webpack+vue等，都可以解决各种资源的依赖加载、打包的问题。甚至css都是打包在js里去动态添加到dom文档中的。

那如果我们想要想要多页的普通的web站点，css独立出来，js加载需要模块？

项目地址：webpackDemo_jb51.rar

初始化项目、安装依赖

package.json

"devDependencies": {
  "css-loader": "^0.23.1",
  "extract-text-webpack-plugin": "^1.0.1",
  "file-loader": "^0.8.5",
  "html-loader": "^0.4.3",
  "html-webpack-plugin": "^2.9.0",
  "jquery": "^1.12.0",
  "less": "^2.6.0",
  "less-loader": "^2.2.2",
  "sass-loader": "^4.0.2",
  "style-loader": "^0.13.0",
  "url-loader": "^0.5.7",
  "webpack": "^1.12.13",
  "webpack-dev-server": "^1.14.1"
}

目录结构（我用的express框架，其他的根据个人需求）

- webpackDemo
  - src        #代码开发目录
    - css      #css目录，按照页面（模块）、通用、第三方三个级别进行组织
      + page
      + common
      + lib
    - js       #JS脚本，按照page、components进行组织
      + page
      + components
    + template      #HTML模板
  - node_modules    #所使用的nodejs模块
  - public            #express静态资源文件
    - dist            #webpack编译打包输出目录，无需建立目录可由webpack根据配置自动生成
      + css
      + js
    + img      #图片资源
  + view            #express静态资源文件（webpack编译打包输出view目录）
  package.json      #项目配置
  webpack.config.js  #webpack配置

开发页面

在src/js/page目录下建立index.js文件，在src/view目录下建立index.html文件。入口js和模板文件名对应。

index.html 内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>首页</title>
  <!--
    描述：head中无需再引入css以及facicon，webpack将根据入口JS文件的要求自动实现按需加载或者生成style标签
  -->
</head>
<body>
  <!--
    描述：body中同样无需单独引入JS文件，webpack会根据入口JS文件自动实现按需加载或者生成script标签，还可以生成对应的hash值
  -->
</body>
</html>

就是这样一个简单的HTML模板，不要引入任何CSS和JS，通过webpack打包就可以自动帮我们引入。

index.js内容如下：

//引入css
require("../../css/lib/base.css");
require("../../css/page/index.scss");
$('body').append('<p class="text">index</p>');

page1.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>page1</title>
</head>
<body>
</body>
</html>

page1.js:

//引入css
require("../../css/lib/base.css");
require("../../css/page/page1.less");
$('body').html('page1');

webpack配置（我用的express框架，其他的根据个人需求）

var path = require('path');
var webpack = require('webpack');
/*
extract-text-webpack-plugin插件，
有了它就可以将你的样式提取到单独的css文件里，
妈妈再也不用担心样式会被打包到js文件里了。
 */
var ExtractTextPlugin = require('extract-text-webpack-plugin');
/*
html-webpack-plugin插件，重中之重，webpack中生成HTML的插件，
具体可以去这里查看https://www.npmjs.com/package/html-webpack-plugin
 */
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: { //配置入口文件，有几个写几个
    index: './src/js/page/index.js',
    page1: './src/js/page/page1.js'
  },
  output: {
    path: path.join(__dirname, './public/dist/'), //输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它
    publicPath: '/dist/',        //模板、样式、脚本、图片等资源对应的server上的路径
    filename: 'js/[name].js',      //每个页面对应的主js的生成配置
    chunkFilename: 'js/[id].chunk.js'  //chunk生成的配置
  },
  module: {
    loaders: [ //加载器，关于各个加载器的参数配置，可自行搜索之。
      {
        test: /\.css$/,
        //配置css的抽取器、加载器。'-loader'可以省去
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
      }, {
        test: /\.less$/,
        //配置less的抽取器、加载器。中间!有必要解释一下，
        //根据从右到左的顺序依次调用less、css加载器，前一个的输出是后一个的输入
        //你也可以开发自己的loader哟。有关loader的写法可自行谷歌之。
        loader: ExtractTextPlugin.extract('css!less')
      }, {
        test: /\.scss$/,
        //配置scss的抽取器、加载器。中间!有必要解释一下，
        //根据从右到左的顺序依次调用scss、css加载器，前一个的输出是后一个的输入
        //你也可以开发自己的loader哟。有关loader的写法可自行谷歌之。
        loader: ExtractTextPlugin.extract('css!scss')
      }, {
        //html模板加载器，可以处理引用的静态资源，默认配置参数attrs=img:src，处理图片的src引用的资源
        //比如你配置，attrs=img:src img:data-src就可以一并处理data-src引用的资源了，就像下面这样
        test: /\.html$/,
        loader: "html?attrs=img:src img:data-src"
      }, {
        //文件加载器，处理文件静态资源
        test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader?name=./fonts/[name].[ext]'
      }, {
        //图片加载器，雷同file-loader，更适合图片，可以将较小的图片转成base64，减少http请求
        //如下配置，将小于8192byte的图片转成base64码
        test: /\.(png|jpg|gif)$/,
        loader: 'url-loader?limit=8192&name=./img/[hash].[ext]'
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({ //加载jq
      $: 'jquery'
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'commons', // 将公共模块提取，生成名为`commons`的chunk
      chunks: ['index','page1'], //提取哪些模块共有的部分
      minChunks: 2 // 提取至少2个模块共有的部分
    }),
    new ExtractTextPlugin('css/[name].css'), //单独使用link标签加载css并设置路径，相对于output配置中的publickPath

    //HtmlWebpackPlugin，模板生成相关的配置，每个对于一个页面的配置，有几个写几个
    new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
      favicon: './src/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值
      filename: '../../views/index.html', //生成的html存放路径，相对于path
      template: './src/template/index.html', //html模板路径
      inject: 'body', //js插入的位置，true/'head'/'body'/false
      hash: true, //为静态资源生成hash值
      chunks: ['commons', 'index'],//需要引入的chunk，不配置就会引入所有页面的资源
      minify: { //压缩HTML文件
        removeComments: true, //移除HTML中的注释
        collapseWhitespace: false //删除空白符与换行符
      }
    }),
    new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
      favicon: './src/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值
      filename: '../../views/page1.html', //生成的html存放路径，相对于path
      template: './src/template/page1.html', //html模板路径
      inject: true, //js插入的位置，true/'head'/'body'/false
      hash: true, //为静态资源生成hash值
      chunks: ['commons', 'list'],//需要引入的chunk，不配置就会引入所有页面的资源
      minify: { //压缩HTML文件
        removeComments: true, //移除HTML中的注释
        collapseWhitespace: false //删除空白符与换行符
      }
    })

    // new webpack.HotModuleReplacementPlugin() //热加载
  ],
  //使用webpack-dev-server，提高开发效率
  // devServer: {
  //   contentBase: './',
  //   host: 'localhost',
  //   port: 9090, //默认8080
  //   inline: true, //可以监控js变化
  //   hot: true, //热启动
  // }
};

好了，完成以上的这些配置之后，执行webpack打包命令完成项目打包。

Hash: e6219853995506fd132a
Version: webpack 1.14.0
Time: 1338ms
        Asset    Size Chunks       Chunk Names
     js/index.js 457 bytes    0 [emitted] index
     js/page1.js 392 bytes    1 [emitted] page1
    js/commons.js   306 kB    2 [emitted] commons
    css/index.css  62 bytes    0 [emitted] index
    css/page1.css  62 bytes    1 [emitted] page1
   css/commons.css 803 bytes    2 [emitted] commons
     favicon.ico  1.15 kB     [emitted]
../../view/index.html 496 bytes     [emitted]
../../view/page1.html 499 bytes     [emitted]
  [0] ./src/js/page/index.js 170 bytes {0} [built]
  [0] ./src/js/page/page1.js 106 bytes {1} [built]
  + 7 hidden modules
Child html-webpack-plugin for "../../view/page1.html":
    + 1 hidden modules
Child html-webpack-plugin for "../../view/index.html":
    + 1 hidden modules
Child extract-text-webpack-plugin:
    + 2 hidden modules
Child extract-text-webpack-plugin:
    + 2 hidden modules
Child extract-text-webpack-plugin:
    + 2 hidden modules

此时，前往views目录下查看生成的index.html文件，如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>首页</title>
<link rel="shortcut icon" href="/dist/favicon.ico" rel="external nofollow" ><link href="/dist/css/commons.css?e6219853995506fd132a" rel="external nofollow" rel="stylesheet"><link href="/dist/css/index.css?e6219853995506fd132a" rel="external nofollow" rel="stylesheet"></head>
<body>
  <script type="text/javascript" src="/dist/js/commons.js?e6219853995506fd132a"></script><script type="text/javascript" src="/dist/js/index.js?e6219853995506fd132a"></script></body>
</html>

可以看到生成的文件除了保留原模板中的内容以外，还根据入口文件index.js的定义，自动添加需要引入CSS与JS文件，以及favicon，同时还添加了相应的hash值。

两个问题

webpack如何自动发现entry文件及进行相应的模板配置
如何直接处理样式、脚本自动引入问题

var path = require('path');
var webpack = require('webpack');
var glob = require('glob');
/*
extract-text-webpack-plugin插件，
有了它就可以将你的样式提取到单独的css文件里，
妈妈再也不用担心样式会被打包到js文件里了。
 */
var ExtractTextPlugin = require('extract-text-webpack-plugin');
/*
html-webpack-plugin插件，重中之重，webpack中生成HTML的插件，
具体可以去这里查看https://www.npmjs.com/package/html-webpack-plugin
 */
var HtmlWebpackPlugin = require('html-webpack-plugin');
/**
 *将公共模块提取，生成名为`commons`的chunk
 */
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
//压缩
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;

//判断开发模式
var debug = process.env.NODE_ENV !== 'production';
var getEntry = function(globPath, pathDir) {
  var files = glob.sync(globPath);
  var entries = {},
    entry, dirname, basename, pathname, extname;
  for (var i = 0; i < files.length; i++) {
    entry = files[i];
    dirname = path.dirname(entry);  //文件目录
    extname = path.extname(entry);  //后缀名
    basename = path.basename(entry, extname); //文件名
    pathname = path.join(dirname, basename);
    pathname = pathDir ? pathname.replace(new RegExp('^' + pathDir), '') : pathname;
    entries[pathname] = ['./' + entry]; //这是在osx系统下这样写 win7 entries[basename]
  }
  console.log(entries);
  return entries;
}

//入口(通过getEntry方法得到所有的页面入口文件)
var entries = getEntry('src/js/page/**/*.js', 'src/js/page/');
//提取哪些模块共有的部分从entries里面获得文件名称
var chunks = Object.keys(entries);
//模板页面(通过getEntry方法得到所有的模板页面)
var pages = Object.keys(getEntry('src/template/**/*.html', 'src/template/'));

console.log(pages)

var config = {
  entry: entries,
  output: {
    path: path.join(__dirname, './public/dist/'),//输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它
    publicPath: '/dist/',        //模板、样式、脚本、图片等资源对应的server上的路径
    filename: 'js/[name].js',      //每个页面对应的主js的生成配置
    chunkFilename: 'js/[id].chunk.js?[chunkhash]'  //chunk生成的配置
  },
  module: {
    loaders: [ //加载器
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style', 'css')
      }, {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract('css!less')
      }, {
        test: /\.html$/,
        loader: "html?-minimize"  //避免压缩html,https://github.com/webpack/html-loader/issues/50
      }, {
        test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader?name=fonts/[name].[ext]'
      }, {
        test: /\.(png|jpe?g|gif)$/,
        loader: 'url-loader?limit=8192&name=imgs/[name]-[hash].[ext]'
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({ //加载jq
      $: 'jquery'
    }),
    new CommonsChunkPlugin({
      name: 'commons', // 将公共模块提取，生成名为`commons`的chunk
      chunks: chunks,
      minChunks: chunks.length // 提取所有entry共同依赖的模块
    }),
    new ExtractTextPlugin('css/[name].css'), //单独使用link标签加载css并设置路径，相对于output配置中的publickPath
    debug ? function() {} : new UglifyJsPlugin({ //压缩代码
      compress: {
        warnings: false
      },
      except: ['$super', '$', 'exports', 'require'] //排除关键字
    }),
  ]
};

pages.forEach(function(pathname) {
  var conf = {
    filename: '../../views/' + pathname + '.html', //生成的html存放路径，相对于path
    template: 'src/template/' + pathname + '.html', //html模板路径
    inject: false, //js插入的位置，true/'head'/'body'/false
    /*
    * 压缩这块，调用了html-minify，会导致压缩时候的很多html语法检查问题，
    * 如在html标签属性上使用{{...}}表达式，所以很多情况下并不需要在此配置压缩项，
    * 另外，UglifyJsPlugin会在压缩代码的时候连同html一起压缩。
    * 为避免压缩html，需要在html-loader上配置'html?-minimize'，见loaders中html-loader的配置。
     */
    // minify: { //压缩HTML文件
    // removeComments: true, //移除HTML中的注释
    // collapseWhitespace: false //删除空白符与换行符
    // }
  };
  if (pathname in config.entry) {
    favicon: './src/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值
    conf.inject = 'body';
    conf.chunks = ['commons', pathname];
    conf.hash = true;
  }
  config.plugins.push(new HtmlWebpackPlugin(conf));
});
module.exports = config;

下面的代码和上面的差不多，本质上的区别就是把通过一个方法把所有的相关的文件放到一个对象里这样就完成了自动引入的效果了！

以上均为在mac osx 系统的配置，win7路径可能会有不同

glob: 这边解析出来的不一样：

但要求最终

entries:
 {
 index: [ './src/template/index.js' ],
 page1: [ './src/template/page1.js' ]
 }

pages:
 [ 'index', 'page1' ]

要以根据个人电脑的配置相应的更改

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

详解使用webpack构建多页面应用

关于webpack的配置和使用,网上已经有许多文章了,大多是在讲单页应用,当我们需要打包多个html时,事情就变得麻烦起来.怎么在webpack-dev-server里使用路由?怎么打包多个html和js chunk并自动更新md5?本文讲的就是如何解决这些问题. 这里假设你对Webpack已经有最基础的了解需求来看下我们的需求: 使用webpack-dev-server做开发时的服务器在webpack-dev-server里使用路由,访问/a时候显示a.html,/b显示b.html 打
详解基于webpack2.x的vue2.x的多页面站点

本文介绍了基于webpack2.x的vue2.x的多页面站点,分享给大家,具体如下: vue的多页面依旧使用vue-cli来初始化我们的项目然后修改主要目录结构如下: ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── we
详解vue-cli + webpack 多页面实例配置优化方法

本文介绍了vue-cli + webpack 多页面实例配置优化方法,分享给大家 vue+webpack是否有多页面目前使用vue来做项目,估计大部分都是单页面(SPA)应用,一个轻型的 MVVM 框架,谁用了MVVM框架,就再也回不去JQ时代了,哈哈. 在手机端的项目,使用vue + vue-router是high到爆,不仅仅是我们开发的而言,最主要的用户体检也是开足马力,体检感杠杠的. 那问题来了,使用vue+webpack的单页面是爽到爆,那如果是多页面也能不能high到爆呢?那当然呀,
详解webpack 多页面/入口支持&公共组件单独打包

webpack系列目录 webpack 系列二:webpack 介绍&安装 webpack 系列三:webpack 如何集成第三方js库 webpack 系列四:webpack 多页面支持 & 公共组件单独打包 webpack 系列五:webpack Loaders 模块加载器 webpack 系列六:前端项目模板-webpack+gulp实现自动构建部署基于webpack搭建纯静态页面型前端工程解决方案模板, 最终形态源码见github: https://github.com
详解vue-cli + webpack 多页面实例应用

关于vue.js vue.js是一套构建用户界面的轻型的渐进式前端框架.它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.使用vue可以给你的开发带来极致的编程体验. 关于vue-cli Vue-cli是vue官方提供的一个命令行工具(vue-cli),可用于快速搭建大型单页应用.该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程.只需一分钟即可启动带热重载.保存时静态检查以及可用于生产环境的构建配置的项目. 疑问 vue-cli主要是用于构建单页应用的脚手架,但
详解webpack编译多页面vue项目的配置问题

本文主要介绍了webpack编译多页面vue项目的配置问题,分享给大家,具体如下: 一般情况下,构建一个vue项目的步骤为: 1,安装nodejs环境 2,安装vue-cli cnpm install vue-cli -g 3,构建vue项目 vue init webpack-simple vue-cli-multipage-demo 4, 安装项目依赖包 cnpm install 5,在开发环境下运行该项目: npm run dev 通过上面这几步一个简单的vue项目的开发环境基本就搭建起来,
webpack构建react多页面应用详解

写这个的初衷是很难找一个简洁的项目脚手架,很多脚手架都有很多依赖,光看依赖就要很久,所以自己参照网上的内容,弄个这么一个简单的多页面的脚手架. 利用creat-react-app 新建一个react应用 npm install -g create-react-app 然后创建一个项目 create-react-app demo create-react-app会自动初始化一个脚手架并安装 React 项目的各种必要依赖,如果在过程中出现网络问题,请用cnpm淘宝镜像安装. 然后我们进入项目并启动
webpack多页面开发实践

写在前面 webpack是一款模块加载器兼打包工具,能把js,css,页面,图片,视频等各种资源,进行模块化处理.而现在网上流传很多单页面的webpack模型,那多页面呢?比较少,现在我提供一个多页面的前端模型.希望大家适合使用. 在最开始接触webpack的时候,我都觉得webpack只适用于单页面应用,比如webpack+react,webpack+vue.我自己在使用webpack+vue构建项目及开发的过程中感受到了webpack的强大和方便.基于实际项目需求,我在想,多页面站点是否也能
详解webpack+express多页站点开发

学习了webpack门级的教程后,觉得可能是专门为单页应用而量身打造的,比如webpack+react.webpack+vue等,都可以解决各种资源的依赖加载.打包的问题.甚至css都是打包在js里去动态添加到dom文档中的. 那如果我们想要想要多页的普通的web站点,css独立出来,js加载需要模块? 项目地址:webpackDemo_jb51.rar 初始化项目.安装依赖 package.json "devDependencies": { "css-loader"
详解webpack与SPA实践之开发环境搭建

目前,公司前端项目开发技术栈基本改造为使用gulp进行自动化构建,webpack进行项目模块化依赖管理,Vue+ Vuex + Vue-Router作为项目组件化开发框架,为了更深入的理解.使用当前技术栈并与读者分享.交流,计划推出一系列相关学习与实践文章.本篇为开篇,主要讲述如何使用webpack搭建开发环境. 项目初始化以你喜欢的任意方式,创建项目根目录,如: mkdir vue-hello 初始化包模块管理文件进入项目根目录,初始化项目包模块管理文件package.json: npm
详解webpack之scss和postcss-loader的配置

本文介绍了详解webpack之scss和postcss-loader的配置,分享给大家,具体如下: 开始 npm i sass-loader node-sass postcss-loader autoprefixer 首先配置postcss-loader 在这里postcss是为了来给浏览器内核添加私有前缀.当前postcss还有其他操作比如px2rem之类的.可以把postcss想象成babel-core只是一个控制中心,主要的还是它分散出来的插件. /**** package.json **
详解webpack 打包文件体积过大解决方案（code splitting）

优化对比 : 未优化前:index.html引入一个main.js文件,体积2M以上. 优化后入:index.html引入main.js.commons.js.charts.js.other.js.以达到将main.js平分目的.每个文件控制300k以内.(如果高兴100k也没问题) 用到的一堆库及工具: vue.webpack.babel.highcharts.echarts.jquery.html2canvas******此去省略若干m代码问题: 开发环境用webpack后发现单个js文件
详解webpack 入门与解析

每次学新东西总感觉自己是不是变笨了,看了几个博客,试着试着就跑不下去,无奈只有去看官方文档. webpack是基于node的.先安装最新的node. 1.初始化安装node后,新建一个目录,比如html5.cmd中切到当前文件夹. npm init -y 这个命令会创建一个默认的package.json.它包含了项目的一些配置参数,通过它可以进行初始安装.详细参数:https://docs.npmjs.com/files/package.json. 不要y参数的话,会在命令框中设置各项参数,但
详解webpack模块化管理和打包工具

本篇文章主要介绍了详解webpack模块化管理和打包工具,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 Webpack简介 webpack是当下最热门的前端资源模块化管理和打包工具. 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载.通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块. AMD 模块. ES6 模块.CSS.图片. JSON.
详解webpack的文件监听实现(热更新)

前言文件监听是在源码发生变化时,自动重新构建出新的输出文件. webpack 开启监听模式,有两种方式: 1.启动 webpack 命令时,带上 --watch 参数. 唯一缺点:需要手动刷新才能看到变化: 2.在配置 webpack.config.js 中设置 watch: true. 优点: (1) WDS 不刷新浏览器 (2) WDS 不输出文件,⽽是放在内存中 (3) 使⽤用 HotModuleReplacementPlugin 插件 1 第一种方式, --watch 1.1 配置
一文详解webpack中loader与plugin的区别

目录一.Loader 1.loader的作用: 2.loader的工作原理: 3. Loader 执行顺序 4.如何开发一个loader 二.Plugin 1.plugin解决其他的更多的自动化打包工作 2.自定义插件常见的Loader和Plugin loader: plugin: 一.Loader 1.loader的作用: webpack 只能直接处理 javascript 格式的代码.任何非 js 文件都必须被预先处理转换为 js 代码,才可以参与打包.loader(加载器)就是这样一个
详解微信第三方小程序代开发

详解微信第三方小程序代开发微信申请第三方之后可以获取授权方的很多权限,主要的是生码和待开发,生码的第三方授权之前已经写了一篇文章,最近做了小程序待开发,总结一下写下来供大家参考注意事项:如果在调试过程中返回了错误码请到小程序代开发api页面查看, 小程序代开发使用的域名是你申请第三方时候填写的域名, 小程序代码模板最多只有50个,可以删除然后重新添加. 准备工作: 申请微信第三方并且权限那边要选上代开发,第三方申请成功之后就是准备小程序了,需要两个小程序,一个作为小程序代码库,一个作为用
详解webpack babel的配置

Babel是什么 Babel是一个编译JavaScript的平台,它的强大之处表现在可以通过编译帮你达到: 使用下一代的javascript(ES6,ES7,--)代码,即使当前浏览器没有完成支持: 使用基于JavvScript进行扩展语言,比如React的JSX: npm i babel-core babel-preset-env babel-loader babel-plugin-transform-runtime babel-preset-stage-2 -D 关于babel的使用首先

详解webpack+express多页站点开发

相关推荐

随机推荐