webpack学习（一）

2018-12-15 本文已影响0人 zhouyilian

概念

Entry：入口
Output：输出
Loaders：loader
Plugins：插件
Mode ：模式
Browser Compatibility：浏览器兼容

1 Entry

没有打包之前的原文件。可以指定一个文件、或者不同目录下的文件，在不指定的情况下默认值为：./src/index.js。可以在配置文件（webpack.config.js)中指定其它文件，如下：

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

/*** file.js ***/
document.getElementById('app').innerHTML="这是我第一个打包成功的程序";

入口文件已经创建和配置，下面创建和配置打包文件，以及在html文件中引入

2 Output

output属性表明webpack在哪里输出打包好的文件，以及如何命名此文件。默认值为：./dist/main.js，作为主要的输出文件，./dist目录就是输出的目录，同样可以在配置文件（webpack.config.js)中修改output属性来修改输出文件和目录），如下:

const path = require('path'); //path模块指的是node.js模块
module.exports = {
  entry:'./my/entry/entry.js',
  output:{
    path:path.resolve(_dirname,'dist'),  //打包文件的目录
    filename:'bundle.js'  //打包文件名
  }
};

<!-- index.html -->
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <h1 id="app"></h1>
    <script src="./dist/bundle.js"></script>
    <!-- 注意这里引入的不是我们创建的文件，而是用webpack生成的文件 -->
</body>
</html>

3 Loaders

webpack只能识别Javascript和json文件，借助Loaders，webpack可以处理其他类型的文件。同样需要在配置文件中指定两个所属值

test：告诉webpack哪些文件需要被转换
use：告诉webpack相应的文件使用哪个loader进行转换

const path = require('path')
module.exports = {
  output:{
    filename:'my-first-webpack.bundle.js'
  },
  module:{
    rules:[
    { test:/\.txt$/, 
      use:'raw-loader'
    }]
  }
}

上述配置中定义了一个module.rules属性，当webpack编译器在发现任何后缀为.txt的文件时，会先使用raw-loader转换一下，然后再把转换后的内容添加到打包文件中。

4 Plugins

Loader的作用是转换某些类型的模块，而借用插件可以做更广泛的工作，如压缩、优化程序，甚至改变环境变量。我们只需要通过requre()这个插件，然后在plugins数组中添加这个插件，便可以使用某一个插件，并且大多数插件都是支持修改配置的，如下：

const HtmlWebpackPlugin = require('html-webpack-plugin'); // installed via npm
const webpack = requre('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文件，此文件就是你的应用程序，在其中已经自动引用好了打包的文件。

5 Mode

通过设置mode属性，可以启动webpack内置的优化，可以对它指定development,production,none，不同的值对应着不同的环境，默认值是production，如：

module.exports={
  mode：'production'
};

6 Browser compatibility

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