webpack基础使用

上一篇《什么是构建？webpack打包思想》
　　webpack是在node环境里跑的，所以先搭建构建环境。node的安装很简单，去官网下载node 安装包直接安装即可，就跟平常软件一样。npm是node自带的包管理器，对npm不熟悉建议先看：
安装完node后，我们到D盘下，打开cmd，执行下面的命令：

1 npm install webpack -g // g全局安装
2 mkdir movetest //创建项目目录 movetest(随便乱起的)
3 cd movetest
4 npm init // 生成package.json
5 npm install webpack@3 //@3指定了3x版本

整个项目目录文件如下：

项目结构

dist --webpack打包后的生成目录
src --项目代码，里面包含index.html 和main.js

编辑webpack.config.js:

// webpack 是node环境跑的，模块化支持CommonJS规范，不能写成ES6的形式
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装

module.exports = {
  entry: './src/main.js', 
  output: {
    path: path.resolve(__dirname, 'dist'),  // path node的模块，__dirname 指当前文件的地址，resolve方法合并地址
    filename: 'my-first-webpack.bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

entry -- 告诉webpack解析入口，webpack只懂js
output --告诉webpack构建后，将生成的文件放到哪里
HtmlWebpackPlugin -- 因为webpack只懂js，对其他文件的操作需要插件或者loader(后面介绍)来完成。这个插件告诉webpack，将打包后的文件引入到index.html中。而我们需要安装这个插件，在cmd命令界面中执行npm install html-webpack-plugin

然后index.html 和 main.js 分别：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title></title>
</head>
<body>
</body>
</html>

alert('my-first-webpack-test')   // main.js

然后我们到cmd命令界面执行：webpack --config webpack.config.js，然后我们看到webpack构建信息，
webpack帮我们生成了两个文件my-first-webpack.bundle.js 以及index.html，其实就是我们配置文件webpack.config.js 中定义的 filename

webpack构建信息

同时打开dist目录

dist目录

查看index.html代码：

index.html

打开index.html

有趣的是，my-first-webpack.bundle.js 代码就比较复杂了。这里不贴图了，但我们知道我们打包成功了。
其实webpack的构建过程：
根据入口main.js，分析整个项目的引入了哪些js文件或者css文件或者font资源文件，然后打包构建，输出到我们配置的目录下，并引入到index.html中。那么我们就可以在main.js中引入css文件和其他js文件

在src下添加reset.css 和 other.js

/*reset.css*/
body{
    color: red;
    font-size: 30px;
}

//other.js
document.write('如果引入成功，字体大小是30px，并且是红色，能看到这段文字')

修改main.js

// 引入两个文件
require('./reset.css')
require('./other.js')

同时，我们需要修改一下webpack.config.js，但是webpack只懂js,对于非js文件，我们要引入对应的处理loader工具，我们这次要引入的是css-loader和style-loader来处理我们的css代码

修改webpack.config.js

当然，我们也要npm install css-loader style-loader。配置文件中，test是正则匹配，告诉webpack，只要你遇到是css文件，交由css-loader处理，处理完后再由style-loader处理成style标签样式引入，使其生效。OK，让我们重新打包一下，命令行执行： webpack --config webpack.config.js

再一次打包成功.png

打开dist/index.html

看到引入文件成功

这时你可能懵逼了，为什么对html文件就用plugin，对css就用loader？其实两者的区别是：
loader 用于对模块的源代码进行转换，它参与webpack构建中，帮助对非JS文件的处理，或者对于那些用ES6、ES7(新js规范)写的js文件处理，处理成webpack可识别的模块，再由webpack打包处理；而plugin是webpack构建周期执行的，比如webpack构建打包完成完成后，调用html-webpack-plugin将生成的bundle.js 注入到index.html。

一句话：loader是帮助webpack处理它不能处理的文件，变成webpack可识别的js模块，而对应plugin这是webpack构建周期中的钩子函数，比如：
开始构建起，做点什么，
loader处理css文件，做点什么
loader处理font文件，做点什么
做点什么构建完成后，做点什么
由plugin来担任

OK，我们已经明白了webpack基本概念与处理方式，接下来我们从vue-cli工具生成的工程来学习webpack的配置。
下一篇《从vue-cli生成工程学webpack配置》

系列文章:
《什么是构建？ webpack打包思想？》
《webpack基础使用》
《从vue-cli学webpack配置1——针对webpack2》
《从vue-cli学webpack配置2——针对webpack3》
《webpack 、mainfest 、runtime 、缓存与CommonsChunkPlugin》
《webpack打包慢的解决方案》

webpack基础使用

推荐阅读更多精彩内容