webpack 学习笔记

2019-03-17

webpack学习笔记

想想webpack是一个管道，有入口和出口。

核心理论

Entry 入口

未打包的目录，指定一个入口让webpack来操作它

1
2
3

module.exports = {
  entry: './path/to/my/entry/file.js'
};

Output：输出

打包完成输出的目录，指定一个目录告诉webpack输出到哪儿，及命名规则

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),	// 路径
    filename: 'my-first-webpack.bundle.js'	// 命名
  }
};

Loaders：loader

让webpack支持js和JSON以外的文件

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};
上面的配置中定义了一个module.rules属性，这个属性又有两个属性：test和use。这就好像告诉webpack编译器说：

”Hi，webpack编译器，当你发现任何后缀为.txt的文件时，请使用raw-loader先转换一下，然后再把转换后的内容添加到打包文件中。“

Plugins：插件

使用require引用插件，在plugins数组中添加插件

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

在上面的例子中，使用html-webpack-plugin生成一个HTML文件，这个文件就是你的应用程序。在其中已经自动引用好了打包的文件。

Mode：模式

通过设置mode属性，可以启动webpack内置的优化。

Browser Compatibility：浏览器兼容

webpack 支持所有基于ES5的浏览器，但是IE8及以下是不支持的。因为webpack需要import()和require()。如果需要支持老版本浏览器，可以使用loader解决。

安装

创建一个目录并安装webpack及cli（并非全局安装）

1
2
3

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

目录结构

传统web开发中，