Webpack 简单点

说话的方式简单点。。。
安装
$ npm i -g webpack webpack-dev-server

Webpack需要配置文件  webpack.config.js （CommonJS模块的配置文件）

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  }
};

最简化版。。。

命令行:

webpack   类似build

webpack -p   类似release

webpack --watch  持续监听

webpack -d  包括source map

webpack --colors 加点颜色（在命令行中加点颜色通俗点）

 

一个配置文件应该包含哪些呢：介绍常用的

entry file 入口文件（单个多个都行）

output file  输出文件

babel-loader  加载器是预处理器，它在Webpack的构建过程之前转换应用程序的资源文件

module.exports = {
  entry: './main.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015', 'react']
          }
        }
      }
    ]
  }
};

这里使用的是babel-loader，Babel的预设插件babel-preset-es2015和babel-preset-react来转换ES6和React。

css-loader  Webpack允许您将CSS包含在JS文件中，然后使用CSS-loader预处理CSS文件

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules:[
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      },
    ]
  }
};

这里使用了css-loader用于读css文件，style-loader用于将css<style></style>插入html中。

Image-loader 图片加载器

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules:[
      {
        test: /\.(png|jpg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
};

url-loader将图像文件转换为<img>标记。如果图像大小小于8192字节，则将其转换为数据URL; 否则，它将转换为普通的URL。

当服务启动时，相应大小的图片的路径为：

<img  src = “data：image / png; base64，iVBOR ... uQmCC”> 
<img  src = “4853ca667a2b8b8844eb2693ac1b2578.png”>

 还有其他loaderl可以了解不多说，类似。

plugins 顾名思义插件，Webpack有一个插件系统来扩展其功能

UglifyJs   将缩小output（bundle.js）JS代码

var webpack = require('webpack');
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new UglifyJsPlugin()
  ]
};

html-webpack-plugin  自动创建index.html文件

 open-browser-webpack-plugin 自动打开浏览器的一个新的选项卡

var HtmlwebpackPlugin = require('html-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Webpack-demos',
      filename: 'index.html'
    }),
    new OpenBrowserPlugin({
      url: 'http://localhost:8080'
    })
  ]
};

更多其他的插件，还有拓展功能等着下次接着说。