webpack学习

webpack五大核心概念

核心概念

入口

module.exports = {
    entry: './path/to/my/enter/file.js'
};
/*
告知webpack从哪个文件开始去阅读去查验代码
*/

输出

const path = require('path');

module.exports = {
    entry: './path/to/my/enter/file.js',
  output: {
      path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};
/*
output是webpack给出的结果
打包出的路径是什么，名字是什么…
*/

Loader

const path = require('path');

module.exports = {
    output: {
      filename: 'my-first-webpack.bundle.js'
  },
  module: {
      rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};
/*
raw-loader去处理txt文件
*/

插件

const HtmlWebpackPlugin = require('html-webpack-plugin'); //npm安装
const webpack = require('webpack');

module.exports = {
    module: {
      rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
      new HtmlWebpackPlugin({template: './src/index.html'})
  ]
}
//loader 处理webpack本身不能处理的文件，即非js文件
//plugins 能处理更复杂的任务

模式/兼容性

webpack支持所有符合ES5标准的浏览器（不支持IE8及以下的版本）。webpack的import()和require.ensure()需要promise。如果你想要支持旧版本浏览器，在使用这些表达式之前，还需要提前加载polyfill。

npm install --save babel-polyfill

src/index.js

import 'babel-polyfill';

function component() {
    var element = document.createElement('div');
  element.innerHTML = join(['Hello', 'webpack'], ' ');
  return element;
}
document.body.appendChild(component());