彩世界开奖app官网-彩世界平台官方网址(彩票平台)
做最好的网站
来自 前端技术 2019-12-07 08:19 的文章
当前位置: 彩世界开奖app官网 > 前端技术 > 正文

webpack 快速入门彩世界平台官方网址

生产环境配置

在使用webpack 4.x 的 mode 配置之后,需要我们手动配置的项已经减少了很多,像js代码压缩这种工具 UglifyJsPlugin 就已经不用手动去配置。但是像很多前面提到的 代码分离css代码提取和压缩html的生成 以及 复制静态资源 还需要我们手动配置。

Babel

Babel 是一款转码编译器,可以很方便地将 ES6、ES7 等当前浏览器不兼容的 JavaScript 新特性转码为 ES5 等当前浏览器普遍兼容的代码。将两者结合起来可以很方便地在项目中一边使用 ES6 编写代码,一边自动生成 ES5 代码。

Babel有不同的插件,可以按需安装:

安装相关组件:

//安装加载器 babel-loader 和 Babel 的 API 代码 babel-core
npm install --save-dev babel-loader babel-core

安装 ES2015(ES6)的代码,用于转码
npm install babel-preset-es2015 --save-dev

//用于转换一些 ES6 的新 API,如 Generator,Promise 等
npm install --save babel-polyfill

配置webpack.config.js:

var path = require('path')
var webpack = require('webpack')
    //分离css和js
var ExtractTextPlugin = require('extract-text-webpack-plugin')
    //生成html
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // bundle入口
    entry: [
        './node_modules/webpack-dev-server/client?http://localhost:8080',
        './node_modules/webpack/hot/dev-server',
        './node_modules/babel-polyfill',
        './src/webpack',
        './src/index'
    ],
    // bundle输出
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js' //可重命名
    },
    //插件
    plugins: [
        // new webpack.optimize.UglifyJsPlugin({
        //     compress: {
        //         warnings: false
        //     }
        // }),
        //分离css和js
        new ExtractTextPlugin("styles.css"),
        //生成html页面
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        //热加载
        new webpack.HotModuleReplacementPlugin()
    ],
    //组件loader
    module: {
        loaders: [
            // css转换
            {
                test: /.css$/,
                loaders: ['style-loader', 'css-loader']
            },
            // sass转换 
            {
                test: /.scss$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            },
            //css背景图片转换
            {
                test: /.(png|jpg)$/,
                loader: 'url-loader?limit=8192&name=images/[name].[ext]'
            },
            //读取html,打包src图片
            {
                test: /.html$/,
                loader: "html-withimg-loader"
            },
            //编译es6,转化为es5
            {
                test: /.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader', 
                query: {
                    presets: ['es2015']
                }
            }
        ]
    },
    devServer: {
        contentBase: './dist',
        hot: true
    }
}

entry入口那里增加了babel-polyfill,loader增加babel-loader。由于要验证打包后的js是否已编译转为es5,所以这里注释代码压缩的插件。

在index.js里任意输入一个es6语法的语句:

彩世界平台官方网址 1

然后再打开打包后的bundle.js文件,拉到最下面,可以发现该es6语句已被转为es5语法输出:

彩世界平台官方网址 2

编译转码成功。

│ └──build.js

安装依赖

  • eslint-loader
  • eslint
  • eslint-config-airbnb
  • eslint-plugin-import
  • eslint-friendly-formatter
  • eslint-plugin-flowtype
  • eslint-plugin-jsx-a11y
  • eslint-plugin-react
  • babel-polyfill
  • webpack
  • jest
  • friendly-errors-webpack-plugin 编译提示的webpack插件
  • html-webpack-plugin 新建html入口文件的webpack插件
  • copy-webpack-plugin webpack配置合并模块
  • webpack-merge webpack配置合并模块
  • webpack-dev-server
  • webpack-bundle-analyzer
  • webpack-cli
  • portfinder 寻找接口的插件
  • extract-text-webpack-plugin
  • node-notifier
  • optimize-css-assets-webpack-plugin
  • autoprefixer
  • mini-css-extract-plugin
  • autoprefixer
  • css-loader
  • less-loader
  • postcss-loader
  • postcss-import
  • postcss-loader
  • style-loader
  • babel-core
  • babel-eslint
  • babel-loader
  • babel-plugin-transform-runtime
  • babel-plugin-import
  • babel-preset-env
  • babel-preset-react
  • babel-polyfill
  • url-loader
  • cross-env
  • file-loader
yarn add eslint eslint-loader eslint-config-airbnb eslint-plugin-import eslint-friendly-formatter eslint-plugin-flowtype eslint-plugin-jsx-a11y eslint-plugin-react babel-polyfill webpack jest webpack-merge copy-webpack-plugin html-webpack-plugin friendly-errors-webpack-plugin webpack-dev-server webpack-bundle-analyzer webpack-cli portfinder extract-text-webpack-plugin node-notifier optimize-css-assets-webpack-plugin autoprefixer mini-css-extract-plugin autoprefixer css-loader less-loader postcss-loader postcss-import postcss-loader style-loader babel-core babel-eslint babel-loader babel-plugin-transform-runtime babel-plugin-import babel-preset-env babel-preset-react babel-polyfill url-loader cross-env file-loader -D

前言

本文是基于我厂基友的Webpack学习系列(一)初学者使用教程 这篇文章做构建。可能基友的文章是基于Mac环境,我是windows环境,在学习时遇到了很多坑,询问基友,他让我搞个基于windows环境的,我想了想,正好这几天需求不多,webpack3.0也来了,那就干吧!

varpath =require('path');

resolve

resolve常用的两个配置为 aliasextensions

  • alias 创建import或者require的别名
  • extensins 自动解析文件拓展名,补全文件后缀
resolve: {
    // 自动解析文件扩展名(补全文件后缀)(从左->右)
    // import hello from './hello'  (!hello.js? -> !hello.jsx? -> !hello.json)
    extensions: ['.js', '.jsx', '.json'],
    alias: {
      '@': resolve('src')
    }
  },

运行

按上面步骤安装后,运行

webpack

即可打包,我们可以看到dist文件夹中生成了bundle.js,此时还未压缩,大小为3k。彩世界平台官方网址 3

2.1 多入口

我们看到打包后生成了一个js文件,那假如我们项目需求生成几个不同类别的js呢?例如当js文件数量多,就模块化打包后按需加载。

例如:webpack.js和webpack2.js要作为一个模块,而index.js和index2.js要作为另一个模块。这时entry和output就要换一种写法了:

配置webpack.config.js:

var path = require('path')
var webpack = require('webpack')
module.exports = {
  // 多入口
  entry: {
        name1: ['./src/webpack','./src/webpack2'],
        name2: ['./src/index','./src/index2']
  },
  // 输出
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js' //可重命名
  }
}

运行打包后可以在dist里看到两个name.js

彩世界平台官方网址 4

js模块化分离打包成功。

2.2 UglifyJsPlugin

UglifyJsPlugin是webpack自带的核心插件,无需安装,无需声明require直接使用。它运行UglifyJs来压缩输入文件。

配置webpack.config.js,增加plugins项,里面放置插件

var path = require('path')
var webpack = require('webpack')
module.exports = {
  // bundle入口
  entry: ['./src/webpack'],
  // bundle输出
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js' //可重命名
  },
  //插件
  plugins: [
        //压缩
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
   ]
}

更改配置后,运行webpack打包,可以看到大小1k(实际是500多字节),压小了不少。

彩世界平台官方网址 5

}

module

module的选项决定了如何处理项目中的不同类型的模块。其中常用的有 rulesnoParese 两个配置项。

  • noParese 是为了防止weback解析与所有与rule相匹配的文件。目的是,忽略大型的library可以提高构建性能。
noParse: function(content) {
  return /jquery|lodash/.test(content);
}
  • rules 用于在创建模块是,匹配规则数组,以确定哪些规则能够对module应用loader,或者是修改parser。
module: {
    rules: [
    {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        enforce: 'pre',
        use: [{
          loader: 'babel-loader',
        }, {
          loader: 'eslint-loader', // 指定启用eslint-loader
          options: {
            formatter: require('eslint-friendly-formatter'),
            emitWarning: false
          }
        }]
      },
    {
        test: /.css$/,
        include: /node_modules/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [autoprefixer({ browsers: 'last 5 versions' })],
              sourceMap: false,
            },
          },
        ],
      },
      {
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: ('assets/img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: ('assets/media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: ('assets/fonts/[name].[hash:7].[ext]')
        }
      }
    ]
    }

例如上述代码,就使用eslint-lodaerbabel-loader 处理了除了node_modules 以外的 js||jsx。同时配置了,解析图片、视频、字体文件等的解析,当rules匹配到的文件时,小于10000 byte 时,采用url-loader解析文件。(因为base64会让图片的体积变大,所以当文件较大时,使用base64并不明智)

plugins

顾名思义,Plugins 就是webpack的插件。loader只能对静态文件做处理,而Plugins 不处理单个文件,而是作用于整个构建流程。上面提到的UglifyJsPlugin,也是插件的一种。

4.1 分离CSS和JavaScript ——Extract Text Plugin

进行到这里,我们会发现,打包之后的css和js都集合在一起,那到时候引入到页面上,是放到头部,还是尾部呢?显然都是不可取的:无论放头部和尾部,js都会阻塞页面渲染。而插件 Extract Text Plugin 可以帮助我们分离css和js。

命令安装:

npm install --save-dev extract-text-webpack-plugin

配置webpack.config.js

头部增加Extract Text Plugin插件引入,在plugins那里new一个你想输出的样式文件,最后在loader那增加插件写法。

var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
    // bundle入口
    entry: ['./src/webpack'],
    // bundle输出
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js' //可重命名
    },
    //插件
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new ExtractTextPlugin("styles.css")
    ],
    //组件loader
    module: {
        loaders: [ 
            // css转换
            {
                test: /.css$/, 
                loaders: ['style-loader', 'css-loader']
            },
            // sass转换 
            {
                test: /.scss$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader', 'sass-loader')
            }
        ]
    }
}

注意:没错,这里又有坑。

先运行打包一下:彩世界平台官方网址 6

日常报错。所幸日志里面有提醒我们:你的代码老掉牙了,换种写法吧!

来,把sass转换那部分用新的格式重写一遍:

// sass转换 
{
  test: /.scss$/,
  loader: ExtractTextPlugin.extract({
          fallback:'style-loader', 
          use:['css-loader','sass-loader']
  })
}

运行打包,终于成功,看到dist文件夹里生成了styles.css和bundle.js

彩世界平台官方网址 7

4.2 生成html

经历各种报错,终于完成编译css和js。接下来我们利用插件html-webpack-plugin来生成集成html

命令安装:

npm install --save-dev html-webpack-plugin

配置webpack.config.js,添加插件方法和 4.1 一样

var path = require('path')
var webpack = require('webpack')
//分离css和js
var ExtractTextPlugin = require('extract-text-webpack-plugin')
//生成html
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // bundle入口
    entry: ['./src/webpack'],
    // bundle输出
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js' //可重命名
    },
    //插件
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new ExtractTextPlugin("styles.css"),
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    //组件loader
    module: {
        loaders: [
            // css转换
            {
                test: /.css$/,
                loaders: ['style-loader', 'css-loader']
            },
            // sass转换 
            {
                test: /.scss$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            }
        ]
    }
}

运行打包,可以看到再dist文件夹里生成了一个html文件,webpack自动把css和js分别帮我们插入到头部和尾部,这一点很智能。

彩世界平台官方网址 8

varpath =require('path');

Webpack开发配置

因为在webpack 4.X 中使用了流行的 ”约定大于配置“ 的做法,所以在新加入配置项 mode ,可以告知webpack使用相应模式的内置优化。

选项 描述
development 会将process.env.NODE_ENV 的值设为 development 。启用NamedChunksPluginNamedMoudulesPlugin
production 会将process.env.NODE_ENV 的值设为 production 。启用FlagDependencyUsagePluginFlagIncludedChunksPluginModuleConcatenationPluginNoEmitOnErrorsPluginOccurrenceOrderPluginSideEffectsFlagPluginUglifyJsPlugin

如果我们只设置NODE_ENV,则不会自动设置 mode

在开发时,我们往往希望能看到当前开发的页面,并且能热加载。这时,我们可以借助webpack-dev-server 这个插件,来在项目中起一个应用服务器。

// package.json
"scripts": {
    "start": "webpack-dev-server --mode development --config build/webpack.dev.conf.js",
}
// 设置当前的mode为development,同样这个配置也可以写在webpack.dev.conf.js中。然后使用build目录下的webpack.dev.conf.js 来配置相关的webpack。

devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: true, //在开发单页应用时非常有用,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html
    contentBase: path.resolve(__dirname, '../src'),
    compress: true,
    hot: true, // 热加载
    inline: true, //自动刷新
    open: true, //自动打开浏览器
    host: HOST||'localhost',
    port: PORT,
    overlay: { warnings: false, errors: true }, // 在浏览器上全屏显示编译的errors或warnings。
    publicPath: '/',
    proxy: {},
    quiet: true, // necessary for FriendlyErrorsPlugin // 终端输出的只有初始启动信息。 webpack 的警告和错误是不输出到终端的
    watchOptions: {
      poll: false
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      ...process.env
    }),
    //开启HMR(热替换功能,替换更新部分,不重载页面!)
    new webpack.HotModuleReplacementPlugin(),// HMR shows correct file names in console on update.
    //显示模块相对路径
    new webpack.NamedModulesPlugin(),
    //不显示错误信息
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    ]

其实在开发时,我们可以设置 contentBase: '/src'contentBase 指定了devServer能访问的资源地址。因为我们开发时,资源大部分都放在src目录下,所以可以直接指定资源路径为src目录。因为我们在webpack基础配置时,配置了 output 输出为 dist 目录,所以我们也可以在devServer里,设置 contentBasedist 目录。不过此时需要使用copyWebpackPlugin将一些静态资源复制到 dist 目录下,手动新建dist目录,并复制也可以。

另外,当使用 history 路由时,要配置 historyApiFallback = true ,以此让服务器放弃路由权限,交由前端路由。而是用 hash 路由则不需要此配置。

图片

5.1 图片打包

让webpack看得懂图片格式,需要用到 url-loader ,命令安装:

npm install --save-dev url-loader

注意:这时候如果继续往下,到后面打包可能又会报错,因为url-loader是依赖于 file-loader 才运行的,我们命令安装:

npm install --save-dev file-loader

url-loader 还有另外一个功能,将小图片(可自设大小)自动转为base64,减少页面请求数,大赞的功能啊!在html和css写好背景图片后,

配置webpack.config.js:

var path = require('path')
var webpack = require('webpack')
    //分离css和js
var ExtractTextPlugin = require('extract-text-webpack-plugin')
    //生成html
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // bundle入口
    entry: ['./src/webpack'],
    // bundle输出
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js' //可重命名
    },
    //插件
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new ExtractTextPlugin("styles.css"),
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    //组件loader
    module: {
        loaders: [
            // css转换
            {
                test: /.css$/,
                loaders: ['style-loader', 'css-loader']
            },
            // sass转换 
            {
                test: /.scss$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            },
            //css背景图片转换
            {
                test: /.(png|jpg)$/,
                loader: 'url-loader?limit=8192'
            }
        ]
    }
}

运行打包后,打开index.html看看效果:

彩世界平台官方网址 9

5.2 html中的src图片

Webpack 不善于处理纯粹的 HTML, 要让webpack可以打包html中的src图片,需要用到html-withimg-loader。我们在index.html页面中添加一个src的img后命令安装:

npm install --save-dev html-withimg-loader

配置webpack.config.js:

var path = require('path')
var webpack = require('webpack')
    //分离css和js
var ExtractTextPlugin = require('extract-text-webpack-plugin')
    //生成html
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // bundle入口
    entry: ['./src/webpack'],
    // bundle输出
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js' //可重命名
    },
    //插件
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new ExtractTextPlugin("styles.css"),
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    //组件loader
    module: {
        loaders: [
            // css转换
            {
                test: /.css$/,
                loaders: ['style-loader', 'css-loader']
            },
            // sass转换 
            {
                test: /.scss$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            },
            //css背景图片转换
            {
                test: /.(png|jpg)$/,
                loader: 'url-loader?limit=8192'
            },
            //读取html,打包src图片
            {
                test: /.html$/,
                loader: "html-withimg-loader"
            }
        ]
    }
}

loader增加html-withimg-loader

然后在webpack.js里引入index.html:

require('./index.html')

运行打包,没报错即成功,打开dist文件夹里的html看看效果:

彩世界平台官方网址 10

可以看到src的图片已经被成功引入进来。

5.3 图片整理

我们仔细看看输入文件夹,彩世界平台官方网址 11

图片直接输出在dist文件夹,而且名称被重命名。当图片数量上去,非常不利于管理。我们在loader那完善:

{
    test: /.(png|jpg)$/,
    loader: 'url-loader?limit=8192&name=images/[name].[ext]'
},           

name字段指定了在输出目录(dist)新建一个images文件夹,来存放打包后的图片,名称是原图片命名。

彩世界平台官方网址 12

}

ssh部署

打包后的dist文件夹,可以直接借助 node 的 ssh-node ,直接部署到服务器指定的目录下。 ssh-node既支持ssh,也支持密码登录。建议可以为在每个项目下,新建一个.ssh文件,存放项目的私钥。代码如下:

// usage: https://www.npmjs.com/package/node-ssh
var path, node_ssh, ssh, fs, opn, host

fs = require('fs')
path = require('path')
node_ssh = require('node-ssh')
opn = new require('opn')
ssh = new node_ssh()
host = 'localhost'
var localDir = './dist'
var remoteDir = '/opt/frontend/new'
var removeCommand = 'rm -rf ./*'
var pwdCommand = 'pwd'

ssh.connect({
  host: host,
  username: 'root',
  port: 22,
  // password,
  privateKey: "./.ssh/id_rsa",
})
  .then(function() {
    ssh.execCommand(removeCommand, { cwd:remoteDir }).then(function(result) {
      console.log('STDOUT: '   result.stdout)
      console.log('STDERR: '   result.stderr)
      ssh.putDirectory(localDir, remoteDir).then(function() {
        console.log("The File thing is done")
        ssh.dispose()
        opn('http://' host, {app:['chrome']})
      }, function(error) {
        console.log("Something's wrong")
        console.log(error)
        ssh.dispose()
      })
    })
  })

此时,在命令行直接 node deploy.js 就可以运行以上脚本,我们也可以添加一个build deploy的script脚本,便于启动。

"scripts": {
    "depoly": "npm run build && node ./deploy.js",
}

loader

Webpack 本身只能理解、处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。通过使用不同的loader,webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理。

总结:Webpack 只能看懂JavaScript ,对于其他静态文件,需要用loader帮助理解转换。

Loaders的配置选项包括以下几方面:

  • test:一个匹配loaders所处理的文件的拓展名的正则表达式(必须)
  • loader:loader的名称(必须)
  • include/exclude:手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选);
  • query:为loaders提供额外的设置选项(可选)

介绍完毕,撸起来!

3.1 编译CSS

命令安装 css-loader

npm install --save-dev style-loader css-loader

关于loaders的放置顺序:loader解析是从右向左,css-loader用于解析,而style-loader则将解析后的样式嵌入js代码。

配置webpack.config.js,增加module项,里面放置css-loader

var path = require('path')
var webpack = require('webpack')
module.exports = {
    // bundle入口
    entry: ['./src/webpack'],
    // bundle输出
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js' //可重命名
    },
    //插件
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ],
    //组件loader
    module: {
    loaders: [{
       // css转换
       test: /.css$/,
       loaders: ['style-loader', 'css-loader']
    }]
  }
}

配置webpack.js文件,引入index.css

require('./index.css') 

运行 webpack 打包,无报错即编译成功,可以在bundle.js文件里看到压缩进去的css文件。

注意:这里有个小坑,网上很多资料都说可以省略"-loader",即:

loaders: [{
       // css转换
       test: /.css$/,
       loaders: ['style', 'css']
}]

在windows环境我们按这种写法打包一下,会发现报错:

彩世界平台官方网址 13

可以看到,里面提到不再允许省略"-loader"的写法。所以当我们写loader名称时不要简写。

3.2 编译sass(scss)

命令安装 sass-loader

npm install --save-dev style-loader sass-loader

发现有飘红信息:彩世界平台官方网址 14

缺少 node-sass 依赖,我们再敲一行命令装上去就可以了:

npm install --save-dev style-loader node-sass

然后 npm list 命令看看有没有安装成功,后面带别的名称即可查其他分支。如sass-loader

npm list node-sass

配置webpack.config.js,增加sass-loader

var path = require('path')
var webpack = require('webpack')
module.exports = {
    // bundle入口
    entry: ['./src/webpack'],
    // bundle输出
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js' //可重命名
    },
    //插件
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ],
    //组件loader
    module: {
        loaders: [ 
            // css转换
            {
                test: /.css$/, 
                loaders: ['style-loader', 'css-loader']
            },
            // sass转换 
            {
                test: /.scss$/,
                loaders: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    }
}

配置webpack.js文件,引入index.scss

require('./index.css') 
require('./index.scss') 

运行 webpack ,没报错就是编译sass成功了。编译less同理,不赘述。

template:'index.html',

统一规范代码格式

  1. 配置 .editorconfig 使得IDE的方式统一 (见代码)
  2. 配置 .eslintrc.js 使得代码规范统一 (见代码)

    ### 预期功能

  3. 管理资源: 能加载css、sccc、less、以及静态文件

  4. 管理输出:将打包后的静态文件输出至static目录下,以各自的文件类型管理
  5. dev:使用source map,方便调试时代码定位
  6. dev:配置devServer,并配置热替换,热加载,自动刷新,自动打开浏览器,并预留proxyTable
  7. dev:设置默认打开8080,被占用则寻找下一个空接口
  8. production:代码分离,打包css文件,css代码压缩,js代码压缩,输出到模板html,配置gzip
  9. analysis::使用BundleAnalyzerPlugin 分析打包后的性能

    ### 目录结构

  • 首先使用npm init 初始化一个包含package.json的根目录
:.
│  .babelrc             #babel的规则以及插件
│  .editorconfig        #IDE/编辑器相关的配置
│  .eslintignore        #Eslint忽视的目录
│  .eslintrc.js         #Eslint的规则和插件
│  .gitignore           #Git忽视的目录
│  .postcssrc.js        #postcss的插件
│  package-lock.json
│  package.json         #项目相关的包
│  README.md
│  yarn.lock
│
├─build                 #webpack相关的配置
│      utils.js         #webpack配置中的通用方法
│      webpack.base.conf.js #webpack的基础配置
│      webpack.dev.conf.js  #webpack的开发环境配置
│      webpack.prod.conf.js #webpack的生产环境配置
│
└─src                   #主目录,业务代码
    │  app.css
    │  App.js
    │  favicon.ico
    │  index.ejs
    │  index.js
    │
    └─assets            #静态目录,存放静态资源
        │  config.json
        │
        └─img
                logo.svg

什么是webpack?

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 SASS 等。

webpack是基于node.js环境的前端自动化打包工具,本文默认你已有一定使用node和npm安装的基础。

entry:'./components/app.js',//定义文件的入口

代码分离

// 设置代码分离的输出目录
output: {
    path: path.resolve(__dirname, '../dist'),
    filename: ('js/[name].[hash:8].js'),
    chunkFilename: ('js/[name]-[id].[hash:8].js')
  },
 // 代码分离
 optimization: {
    runtimeChunk: {
      name: "manifest"
    },
    splitChunks: {
      chunks: 'all'
    }
  },

可以参阅如下链接:optimization.splitChunks


安装

1.1 webpack安装

首先新建一个练习文件夹demo,在文件中打开命令终端,输入下列指令即可安装webpack

//全局安装

npm install -g webpack

//安装到项目文件夹

npm install --save-dev webpack

安装完之后,demo里会多一个node_modules文件夹。

接下来输入

npm init

会自动创建package.json文件。安装的时候一路回车即可,需要修改后面再进入package.json文件编辑。

package.json文件是webpack的骨架,在里面可以看到各个关键节点,设置快捷命令等。

1.2 文件夹部署

安装好上面的东西,我们开始往demo文件夹塞东西,新建distsrc文件夹、webpack.config.js配置文件来模拟开发环境。最终目录如下:

demo                      //webpack的模拟开发文件夹
   | - webpack.config.js  //配置webpack出入口、插件、loader
   | - node_modules
   | - dist               //打包输出文件夹
   | - src                //开发资源文件夹
     | - webpack.js     //配置webpack引入资源
     | - index.html     /*   基础html文件
     | - index.js            基础js文件
     | - index.css           基础css文件
     | - index.scss          基础scss文件            
     | - images              基础图片文件夹   */
         | - img1.png
         | - img2.png

1.3 配置webpack.config.js

var path = require('path')
var webpack = require('webpack')
module.exports = {
  // bundle入口
  entry: ['./src/webpack'],
  // bundle输出
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js' //可重命名
  }
}

})

  • react-sample-javascript
    • 项目初始化
      • 统一规范代码格式
      • 安装依赖
    • 项目配置
      • webpack 基础配置
      • Webpack开发配置
    • 项目进阶
      • 生产环境配置
    • 结语
    • 参考

问题

至此webpack打包大致的步骤已完成。在行文过程中,发现了几个问题不得其解,网上谷歌搜索也搜不出个所以然,故在这里把问题抛出,希望知道的大神不吝赐教。

一:热加载那里,我发现假如引用的是css文件,修改内容热加载有效果,但引用scss文件热加载就失效了,如何让引用scss文件也能实现热加载呢?

二:html-withimg-loader和raw-loader的区别是什么呢?网上的解释都说是对html解析成字符串,让js读懂。网有些文章,热加载用的loader是raw-loader,但我发现用html-withimg-loader也能跑起来。

... ejs引擎参数传入 略 ...

目录

调试

到这里,基础页面已经成型,接下来就是开发了,开发需要调试。那么我们怎么调试这个页面呢?

如果每次改一次页面,就要打包一次,严重降低效率。运行命令:

webpack --watch

开着这个命令终端,我们修改的html,css(sass),js等静态文件都可以通过刷新html页面直接看到效果。

看到这,有同学说我F5键已抠,懒得每次都要按刷新怎么办?

这时候热加载(HMR)可以帮到你,首先,跑起一个服务。

--progress 可以看到打包过程

项目进阶

源码

至此webpack打包大致的步骤已完成。 如果对配置文件或者目录结构有疑问,想看示例代码的可以带我的github: 上下载源码。

npm安装 webpack到全局

生成HTML

使用htmlWebpackPlugin,配合ejs。可以使控制html 的生成。通过配置的方式,生成html。因为 HtmlWebpackPlugin 本身可以解析ejs,所以不需要单独引入ejs的loader。

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index.ejs', // 设置目录
      title: 'React Demo',
      inject: true, // true->'head' || false->'body'
      minify: {
        //删除Html注释
        removeComments: true,
        //去除空格
        collapseWhitespace: true,
        //去除属性引号
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="noindex, nofollow">

  <title><%= htmlWebpackPlugin.options.title %></title>
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
  <link rel="icon" href="/favicon.ico" type="image/x-icon">

  <% for (var chunk in htmlWebpackPlugin.files.css) { %>
  <link rel="preload" href="<%= htmlWebpackPlugin.files.css[chunk] %>"  as="style">
  <% } %>
  <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
  <link rel="preload" href="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>" as="script">
  <% } %>

  <base href="/">
</head>
<body>
<div id="root"></div>
</body>
<style type="text/css">
  body {
    font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
  }
</style>
</html>

服务

6.1 轻量的node.js express服务器——Webpack-dev-server

webpack可以跑起一个微型服务器,直接作用于资源文件,方便我们开发调试。其中热加载是一个非常实用的功能。命令安装Webpack-dev-server

npm install --save-dev webpack-dev-server

配置webpack.config.js:

var path = require('path')
var webpack = require('webpack')
    //分离css和js
var ExtractTextPlugin = require('extract-text-webpack-plugin')
    //生成html
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // bundle入口
    entry:  [
        './node_modules/webpack-dev-server/client?http://localhost:8080',
        './node_modules/webpack/hot/dev-server',
        './src/webpack'
    ],
    // bundle输出
    output: {
        path: path.join(__dirname, 'dist'),
        filename:  'bundle.js' //可重命名
    },
    //插件
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new ExtractTextPlugin("styles.css"),
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new webpack.HotModuleReplacementPlugin()
    ],
    //组件loader
    module: {
        loaders: [
            // css转换
            {
                test: /.css$/,
                loaders: ['style-loader', 'css-loader']
            },
            // sass转换 
            {
                test: /.scss$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            },
            //css背景图片转换
            {
                test: /.(png|jpg)$/,
                loader: 'url-loader?limit=8192'
            }
        ]
    },
    devServer: {
        contentBase: './dist',
        hot: true
    }
}

增加两个入口,用于关联服务器;devServer里面的contentBase指向你的输出文件夹dist(或其他命名),hot表示是否开启热加载。

可以从入口看出项目服务访问地址是:http://localhost:8080。

跑服务的命令是:

webpack-dev-server --config webpack.config.js

每次都这么输入太累赘,可以在package.json里配置命令:

"scripts": {
    "dev": "webpack-dev-server --config webpack.config.js"
},

这样每次跑服务,直接:

npm run dev

就可以了,当然你也可以自由更改端口号,例如把8080改为8888:

"scripts": {
    "dev": "webpack-dev-server --host localhost --port 8888 --config webpack.config.js"
 },

运行服务命名,在浏览器输入相应端口号,就可以看到运行于webpack服务的页面了

彩世界平台官方网址 15

6.2 热加载(HMR)

终于到重点了。跑起来的8080服务页面,目标调试需要刷新页面才能生效,但只要我们使用HMR,只要代码有改动,无需刷新页面,浏览器会自动更新。

在上文的图片模块中(5.2),已引入了html-withimg-loader ——可以将html转为字符串的loader,在这就省略引入解析html-loader的步骤。

配置webpack.config.js:

var path = require('path')
var webpack = require('webpack')
    //分离css和js
var ExtractTextPlugin = require('extract-text-webpack-plugin')
    //生成html
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // bundle入口
    entry: [
        './node_modules/webpack-dev-server/client?http://localhost:8080',
        './node_modules/webpack/hot/dev-server',
        './src/webpack'
    ],
    // bundle输出
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js' //可重命名
    },
    //插件
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        //分离css和js
        new ExtractTextPlugin("styles.css"),
        //生成html页面
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        //热加载
        new webpack.HotModuleReplacementPlugin()
    ],
    //组件loader
    module: {
        loaders: [
            // css转换
            {
                test: /.css$/,
                loaders: ['style-loader', 'css-loader']
            },
            // sass转换 
            {
                test: /.scss$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            },
            //css背景图片转换
            {
                test: /.(png|jpg)$/,
                loader: 'url-loader?limit=8192'
            }, 
            //读取html,热加载
            {
                test: /.html$/,
                loader: "html-withimg-loader" 
            }
        ]
    },
    devServer: {
        contentBase: './dist',
        hot: true
    }
}

在plugins增加热加载插件;loader增加raw-loader,正则匹配html。

运行:

npm run dev

现在你随意修改页面内容,会发现不用手动刷新浏览器就自动更新了你所更改的内容。

build目录下已经生成的打包好的2个文件

参考

参考了vue-cli v2.96的webpack配置。
【翻译】Webpack——令人困惑的地方
webpack中文文档

collapseWhitespace:true//删除所有注释

output

output最基础的两个配置为 pathfilename

  • path 告诉 webpack的输出目录在那里,一般我们会设置在根目录的 dist 文件夹;
  • filename 用于指定输出文件的文件名,如果配置了创建了多个单独的 chunk 则可以使用[name].[hash] 这种占位符来确保每个文件有唯一的名称;
  • 另一个常见配置 publicPath 则是用于更加复杂的场景。举例:在本地时,你可能会使用 ../assets/test.png 这种url来载入图片。而在生产环境下,你可能会使用CDN或者图床的地址。那么就需要配置 publicPath = "http://cdn.example.com/assets/" 来实现生产模式下编译输出文件时自动更新url。
 output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].[hash:8].js',
    publicPath: '/',
  },

loader:'babel',//babel 转换器

webpack 基础配置

  1. 为了控制开发环境和生产环境,我们可以新建build文件夹。分别书写开发环境和生产环境的webpack配置文件,这样也更可以方便我们分别控制生产环境和开发环境。
  2. 为了提高代码的复用率,也为了区别 基础配置个性配置 ,可以分别新建webpack.basewebpack.devwebpack.prod三个配置文件。首先配置最基础的entry(入口)和output(出口)。
module.exports = {
  context: path.resolve(__dirname, '../'),  //绝对路径。__dirname为当前目录。
    //基础目录用于从配置中解析入口起点。因为webpack配置在build下,所以传入 '../'
  entry: {
    app: ('./src/index.js') //项目的入口
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].[hash:8].js',
    publicPath: '/',
    libraryTarget: 'umd',
  },
}

.... 略 ...

结语

本次从零到一,新建了一个react脚手架。过程中有很多问题,也参考了不少大牛的解释。代码里也有诸多问题。还望各位看官,不吝指教。
记得留下你的足迹哦。

presets:['lastest']//lastest 打包所有新特显es2015 2016 2017

开启打包分析

借助插件 BundleAnalyzerPlugin 直接在plugins中创建该插件:

// webpack.prod.conf.js
const BundleAnalyzerPlugin = process.env.NODE_ENV=== 'analysis' ? require('webpack-bundle-analyzer').BundleAnalyzerPlugin:null
process.env.NODE_ENV=== 'analysis' ? new BundleAnalyzerPlugin() : ()=>{}

在package.json 中可做如下配置:

"scripts": {
    "analysis": "cross-env NODE_ENV=analysis webpack -p --mode production --progress --config ./build/webpack.prod.conf.js ",
  },

通过注入环境变量,来控制是否运行打包分析。


│ └───image

复制静态目录

将所以可能被请求的静态文件,分别放在assets目录下。那么在打包后,为了保证目录能正常访问(不使用CDN等加载静态资源时),我们可以配置 publicPath = '/' 。然后借助于 CopyWebpackPlugin 实现资源复制。

new CopyWebpackPlugin([{
      from: './src/assets/',
      to: 'assets'
    }]),

src/assets 复制到 dist/assets 目录下。


"postcss-loader":"^1.3.3",

项目初始化

├──package.json 项目配置

css代码压缩

借助 MiniCssExtractPlugin 来实现压缩css和提取css。因为 MiniCssExtractPlugin 无法与style-loader 共存,所以我们需要判断当前环境是生成环境还是开发环境。

我们可以新建一个util.js的文件,在webpack当中一些共用的方法。考虑使用个别配置字段 extract 来配置使用何种方式来配置css-loader。参见 util.js 代码。

new MiniCssExtractPlugin({
      filename: 'css/[name].[hash:8].css',
      chunkFilename: 'css/[name]-[id].[hash:8].css',
    }),

/* htmlplugin支持ejs可以配置一些自定义参数在 html用ejs表达式取值*/

项目配置

entry:'../app.js'

react-sample-javascript

React 16.0 boilerplate with react-router-dom, redux & webpack 4. (for javascript)
github项目地址

彩世界平台官方网址 16})

entry

entry可以分别为字符串、数组和对象。

倘若应用只有一个单一的入口,entry的值可以使用任意类型,不会影响输出结果。

// entry为字符串
{
    entry: './src/index.js',
    output: {
        path: '/dist',
        filename: 'bundle.js'
    }
}
// 结果会生成 '/dist/bundle.js'

// entry为数组,可以添加多个彼此不互相依赖的文件。结合output.library选项,如果传入数组,则只导出最后一项。
{
    //如果你在html文件里引入了'bable-polyfill',可以通过数组将它加到bundle.js的最后。
    entry: ['./src/index.js', 'babel-polyfill'] ,
    output:{
        path: '/dist',
        filename: 'bundle.js'
    }
}

// entry为对象,可以将页面配置为多页面的而不是SPA,有多个html文件。通过对象告诉webpack为每个入口,成一个bundle文件。
// 多页面的配置,可能还要借助于HtmlWebpackPlugin,来指定每个html需要引入的js
{
    entry: {
        index: './src/index.js'
        main: './src/index.js'
        login: './src/login.js'
    }
    output:{
        path: '/dist/pages'
        filename: '[name]-[hash:5].js' //文件名取自'entry'对象的键名,为了防止推送代码后浏览器读缓存,故再生成的文件之后加上hash码。
    }
}
// 会分别生成index.js,main.js,login.js三个文件

关于 webpack构建多页面 可以参考这篇文章。不过现在webpack4.x也是一次断崖式升级,感兴趣的同学可以自行搜索。

// entry也可以传入混合类型
{
    entry:{
        vendor: ['jquery','amap','babel-polyfill'] //也可以借助CommonsChunkPlugin提取vendor的chunk。
        index: './src/index.js'
    }
    output: {
        path: '/dist'
        filename: '[name]-[hash:5].js'
    }
}

CommonsChunkPlugin在webpack4.0之后移除了,可以使用splitChunksPlugin代替。

可以参阅如下链接:optimization.splitChunks


css中可能需要添加浏览器前缀兼用不同版本的浏览器,安装postcss-loader在打包过程中会帮你添加css的各种浏览器前缀。

新建项目目录 cd到目录下 npm init初始化node项目

output:{//导出配置

importtpl from'./reg.ejs'

│ └────login.js

│ └──index.html

在项目html的简单模板配置不能满足实际的开发需求,安装html-webpack-plugin.

npm install url-loader image-webpack-loader --save

这样的写法来解析资源的相对路径

npm install autoprefixer --save

"autoprefixer":"^6.7.7",自动添加浏览器前缀-webkit- -ms- 等

有时候我们在项目过程中需要对太大的图片进行压缩

.....略

}

npm install less-loader --save

// publicPath:"www.baidu.com"//静态路径配置(可选)

"html-loader":"^0.4.5",html解析器

├───node_modules 项目依赖

plugins:[

title:'this is my title'//html中使用<%= title %>

"dependencies": {

}

varreg =newReg();

│ └───login 需要打包的组件资源

return{

importRegfrom'./reg/reg.js'

filename:'detail.html',

├──lib 导出组件目录

title:"this is build",

├──public 一些公用的打包资源

```

我们需要换成绝对路径或者使用

name:"reg-components",

file-loader 配合url-loader可以压缩图片

inject:'head',// 设置js是写在head里还是body里

varappEL=document.getElementById('app');

filename:'build.js',//导出文件名

npminstallfile-loader--save

},

运行 npm run start 打包

module.exports = {

entry:{

在根目录下新建 postcss.config.js:

}

filename:'js/[name].js',

tpl:tpl

}

minify:{//过滤器

path:'./build/',//导出文件目录

"babel-preset-latest":"^6.24.0",

"html-webpack-plugin":"^2.28.0",

module.exports={

│ └────login.css

},

layer:'components/layer.js',

}

tools:'components/tools.js'

项目配置参数

plugins: [

module:{

require('autoprefixer')([

inject:'body'

minify:{//过滤器

newhtmlWebpackPlugin({

]

module.exports={

plugins:[

}

webpack.config.js配置

},

webpack 基础篇

我们可以在package.json中加入start命令

excludeChunks[排除] 排除选中的文件 全部导入

};

},

安装 ejs loader 处理html中的js模板变量

filename:'index.html',

inject:'body'

chunks[main,layer]//打包包含这2个JS

}

├──components 导出组件目录

test:'/.js$/',//装换所有JS文件

npm install babel-preset-latest 安装es6加载器

打包一个登录组件

broswers:['last 5 versions'] //表示对最近5个版本进行处理

项目目录

.....略

app.js

├──index.html 页面入口

├──index.html 页面入口

}

},

chunks[包含] 生成模板时候指定包含的 entry文件

template:'index.html'指定了打包的模板文件

entry:入口配置

"ejs-loader":"^0.3.0",ejs解析器

package.json

};

filename:'',// 生成html模板名

命令行运行 npm run start 打包时候就可以看到罗列出的参数

loaders:[

$ npm install webpack -g

│ └───css

constApp =function(){

template:'',// 模板入口

minify 模板过滤器生成模板是删除掉不必须的元素

"webpack":"webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"

--display-reasons 打包原因

script{

--display-modules 展示打包模块

│ └───app.js 入口文件

├──build

],

}

})

main:'/components/app.js',

├──app

removeComments:true,//删除所有空格

}

app:app.js

"start":"webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"

filename 生成html模板名

入门篇

项目目录

};

--watch 动态监听有文件改变时候重新生成页面

npm install babel-core babel-loader --save

方式2 多个JS并行打包到同一个html中

import'../public/css/rest.css'

├──build 生成打包文件目录

name:'assets/[name]-[hash].[ext]'

webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。

"css-loader":"^0.27.3",css解析器

inject 配置js写在那个部分

├──webpack.config.js webpacke配置文件

entry:{

│ └───app.js 打包的JS文件

npm install html-webpack-plugin --save

安装file-loader 解决css中编译引用图片报错问题

npm install postcss-loader --save

我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但我们无须在上面花费太多心思,因为 webpack 有着各种健全的加载器(loader)在默默处理这些事情,这块我们后续会提到。

"file-loader":"^0.10.1",图片路径解析器

})

"style-loader":"^0.13.2"

})

$ npm install webpack --save

安装ES6转码工具

│ └───js

├──webpack.config.js webpacke配置文件

通常我们会将 Webpack 安装到项目的依赖中,这样就可以使用项目本地版本的 Webpack。

├──postcss.config.js 前缀解析loader配置

newApp();

main:main.js

--colors 命令显示彩色

]

exportdefaultfunctionreg(){

varhtmlWebpackPlugin =require('html-webpack-plugin');

newhtmlWebpackPlugin({

├──build 生成打包文件目录

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

title:"this is build",

"scripts": {

项目中可能用less或 sass 安装对应的loader

removeComments:true//删除所有空格

query:{

varhtmlWebpackPlugin =require('html-webpack-plugin');

如果我们在项目中使用相对路径引用了图片 而不是在css中引用 会出现资源找不到

hmlt模板配置

"babel-loader":"^6.4.0",

newhtmlWebpackPlugin({

配置文件

config中 loader配置

{

webpack命令行参数

配置参数介绍

import'./reg.css'

配置webpack.config.js

query:{

limt:2000, //压缩打包图片 200K

template:'index.html',

]

console.log("components stand ready");

命令行运行webpacke

{

....

entry:['../app.js','../main.js'] 多个JS打包

├──node_modules 项目依赖

}

])

你可以不打算将其用在你的项目上,但没有理由不去掌握它,因为以近期 Github 上各大主流的(React相关)项目来说,它们仓库上所展示的示例已经是基于 webpack 来开发的,比如 React-Boostrap 和 Redux。

方式3:多配置方案

excludeChunks[layer]//排除layer打包其他entry里的js

....

"minify": {},过滤

├──app

path:'./build/',

npm run webpack 组件已经打包好

```

项目依赖包

newhtmlWebpackPlugin({

appEL.innerHTML = reg.tpl({

├──package.json 项目配置

test:test.js

}),

方式1 单一入口配置简单

}

reg.js

npminstallejs-loader--save

loader:'file-loader',

output:{

基础版的webpack配置已经完成

"babel-core":"^6.24.0",ES6代码转为ES5代码

本文由彩世界开奖app官网发布于前端技术,转载请注明出处:webpack 快速入门彩世界平台官方网址

关键词: 前端笔记 webpack