R-1.使用webpack构建工程

时间 2019-11-30

标签使用 webpack 构建工程繁體版

原文原文链接

有没有经历过想学习ES6的最新语法，却苦于没有合适的编程环境，不知道如何作才能让ES6的代码跑起来，别人的Less或者sass写的样式能够很好的加载到页面上，本身写的却明明没有语法错误，怎么也没用。其实这都是他们所须要的依赖没有给到位，那么问题就来了，我怎么知道他要依赖啥？说两个点：一、如今浏览器还不支持ES6语法，因此使用ES6及以上版本都须要进行编译：ES6/7/8-->ES5。二、SASS/LESS都是CSS预处理器语言，并不能直接引用到HTML中，只有编译成CSS才能够。css

搭建好的工程在文章最下方有GitHub连接。html

一. 简要了解webpack

刚接触前端的都知道webpack是一种很是强大的打包工具，可是，哪里强大？能打森么包？怎么用的？有什么好处？能解决什么问题？好像就直接就这样了。前端

因此不少人是只听其名不知其意，更不知其用法。先上个连接：webpack中文文档，英文好的能够直接看源文档！能够理解为他是一个打包机，他能够处理各类文件，如less/sass/html/js等，能够打你想要的各类包，也能够结合node.js执行各类脚原本优化项目。它还能作如代码分割和懒加载，打包长缓存，图片转码base64，优化代码体积以及压缩图片等。咱们在这里会讲些什么呢？看下图node

二. 开始构建

先放个目录结构图完整的即整个工程构建后的目录，很简单的。 react

1.建立一个空工程

新建一个空文件夹，而后从命令窗口进入该目录下执行命令webpack

npm initgit

一路回车便可，我新建的是一个react-study空文件夹，执行这个命令以后会生成一个package.json文件。而后在里面建立src文件夹，在src文件夹下新建一个study文件夹和一个style文件夹，study用来存放js文件，style用来存放样式文件,如CSS或者SCSS等。在建立一个index.html文件，主要用来作模板，使用HTMLwebpackplugin插件时候会用到。同src同级建立一个public文件夹，什么不用放。最后咱们在study文件夹下新建一个main.js文件，随便打几个汉字均可以。github

2.添加依赖包

咱们根据webpack思惟导图须要安装如下几个包 (1).首先是咱们须要使用webpack，则先安装webpack。web

npm install --save-dev webpack
复制代码

(2).处理CSS，SCSS样式文件须要使用正则表达式

css-loader：遍历全部css文件并处理
style-loader：把样式插入到页面的style标签中
postcss-loader,autoprefixer：帮CSS自动添加前缀
sass-loader,node-sass：处理.scss文件，把.scss文件编译成.css文件。这俩必须放在一块儿，由于sass-loader依赖于
node-sass，在sass-loader中的loader.js中有引用node-sass. 进行安装( npm install 命令简写形式 npm i )
```
npm i --save-dev css-loader style-loader postcss-loader autoprefixer sass-loader node-sass
复制代码
```

(3).babel处理ES6语法

babel-core：babel的核心包，babel编译器自己，主要提供babel编译API。
( ps:babel-preset-某某是babel编译过程当中所用到的插件。 )
babel-preset-env：根据配置的目标环境自动采用须要的babel插件
babel-preset-stage-0：兼容ES6以及更高版本语法以及工能特性

babel-loader：转换js文件

npm i --save-dev babel-core babel-preset-env babel-preset-stage-0 babel-loader
复制代码

(4).安装react相关依赖

react：使用react所须要的包
react-dom：使用react-dom须要用的包
babel-preset-react：babel进行编译时须要的react相关插件顺便把须要的模板插件HTMLwebpackplugin安装了一块儿。
```
npm i --save-dev react react-dom babel-preset-react html-webpack-plugin 
复制代码
```

至此咱们所须要的全部依赖都安装完成了，如今能够去看看package.json文件，咱们所安装的依赖包括版本都已经记录在案了。后面若是用到了其余依赖也是这样安装！

3.编写webpack的配置文件

前面咱们简单介绍了webpack就是一个打包器，来处理各类文件，这样理解咱们如今要作的就简单多了。官网上说咱们能够写一个配置文件名字叫webpack.config.js,注意这个名字是固定的且位置是在工程的最外层，使用webpack命令的时候会自动加载这个文件。

// webpack.config.js内容
const path = require('path');
module.exports = {
context: path.resolve('./src'),
entry: __dirname + '/src/study/main.js',
output: {
    path: __dirname + "/public",
    filename: "js/bundle.js"
},
module: {
    rules: [
        {
            test: /(\.jsx|\.js)$/,
            use: {
                loader: "babel-loader",
            },
            exclude: /node_modules/
        },
    ]
},
} 
复制代码

从最外层看配置属性所有都放在一个对象实例中（放在{}）。这反应了两个信息，

**第一：wepack配置就是一个对象，学习webpack就是在学习webpack属性，学习属性那就找文档查清楚我所用的属性是什么做用，是什么类型的值。
第二：既然是对象实例，我按照规则不管写在什么地方，写多少个配置文件都是可行的，只要webpack执行时能够加载到该配置就能够**。依次介绍上述配置文件中的每个属性（这里并不主要讲解webpack，可是会告诉你学习它的途径和方法）先介绍一个比较笨可是我以为比较有效的方法：看别人写的webpack配置，遇到不懂的字段属性去webpack官方文档去查，建议最好是去源文档看。下面解析过程当中举个context的例子，给但愿想深刻学习webpack的童鞋一个途径。打开webpack文档，经过右上方的搜索图标直接搜索属性好比context
context：绝对路径，解析的入口点，webpack进行各类文件解析的时候就是从这目录的。默认值是当前文件路径，建议设置这个值，这样能够和当前工做目录区分开。
entry：整个项目的入口文件，从这个文件开始会找到这个文件中全部依赖的文件以及其余文件中依赖的其余文件。咱们设置的是当前工做目录下的src/study/main.js文件为入口文件。
output：有入口就有出口，通过webpack处理的文件输出的地方
path：要输出文件的路径，当前工做目录下的public文件夹。
filename：输出文件的名字，咱们为了把打包出来的js文件和HTML文件能区分开因此在filename加了一层路径js，文件名称定为bundle.js。
module：模块，各类资源加载器都是在这里进行配置。 rules：一组规则，与建立模块时的请求匹配。这些规则能够改变模块的建立方式。也能够将加载器应用于模块，或修改解析器。咱们就是要在这里去用们安装的那些依赖包各类解析器。
test：匹配规则，找到全部符合这个规则的文件。通常是一个正则表达式！
use：指定对符合匹配规则的文件使用何种解析器。他能够是一个对象也能够是个数组，当处理该类型的文件须要用到多个解析器的时候就能够用数组，好比解析.scss文件时。
loader：指定的解析器；解析器的名字字符串形式。
exclude：指定那些不须要解析器处理的文件。忽略node_modules下的文件。

最后咱们把模板插件以及处理css和scss文件的解析器也配置好，最终的webpack.config.js文件以下

var htmlWebpackPlugin = require('html-webpack-plugin');// 引入咱们安装的HTML模板插件
const path = require('path');
module.exports = {
context: path.resolve('./src'),
devtool: 'eval-source-map',
entry: __dirname + '/src/study/main.js',
output: {
  path: __dirname + "/public",
  filename: "js/bundle.js"
},
devServer: {
  contentBase: './public',
  historyApiFallback: true,
  inline: true // 实时刷新
},
module: {
  rules: [
      {
          test: /(\.jsx|\.js)$/,
          use: {
              loader: "babel-loader",
          },
          exclude: /node_modules/
      },
      {
          test:/\.css$/,
          use:['style-loader','css-loader','postcss-loader','sass-loader']
      },
      {
          test:/\.scss$/,
          use:['style-loader','css-loader','postcss-loader','sass-loader']
      },
  ]
},
plugins:[
  new htmlWebpackPlugin({
      template:'index.html'
  })
]
}
复制代码

devtool：一个开发辅助工具，加载webpack编译的源文件。有了它能够在浏览器调试代码时看到源文件。
devServer：实时动态刷新页面，每当你修改了页面代码都会出发刷新，这样不就不用每次都执行一次webpack编译而后本身手动刷新浏览器看结果了。 plugins：所用到的插件都在这里进行初始化，具体插件怎么用，跟webpack同样，去官网查各类配置属性。
**HTMLwebpackplugin**用来生成一个HTML文件，能够给他指定一个默认的模板，template属性指定使用的模板。它还有不少其余配置属性，点开文档，找到Option有个表格列出了全部的属性和做用。

4.编写.babelrc文件和.postcssrc.js文件

// .babelrc 文件内容，stage-0注意必定要放在后面，更好的支持ES六、7属性。
{
"presets":["es2015","react","env","stage-0"]
}
复制代码

.postcssrc.js文件内容

module.exports = {
plugins:{
    "autoprefixer": {}
}
}
复制代码

5.在package.json配置webpack命令

配置webpack的命令主要在package.json文件中的script属性中，以下：

"scripts": {
"build": "webpack",
"start": "webpack-dev-server --open",
"dev": "webpack-dev-server --open --config webpack.dev.config.js --mode development"
},
复制代码

这里的重点在于后面的值，前面的属性名能够随意命名，且能够配置多个。

"webpack-dev-server --open"：使用webpack编译并打开webpack server就是刚才咱们配置的DevServer。
"--config":"指定webpack使用哪个配置文件",
"--mode development":当前运行环境为开发模式 // 下面的是其余打包时的命令属性，能够添加进去试试。

"--progress":"打包过程", "--display-modules":"打包模块", "--colors":"打包颜色", "--display-reason":"打包缘由" 注意：dev那个命令配置咱们是尚未写webpack.dev.config.js文件的，因此这个先自动忽略。

6.测试一下配置好的工程环境

准备了这么多，终于能够验证一下了。建立一个test.js文件在study文件夹下，而后main.js修改以下

// test.js文件
import React,{ Component } from 'react';
import '../style/main.scss';// 引入scss
class Test extends Component{
constructor(props){
    super(props);
}

render(){

    return(
        <div>
            <h1>Hello React!</h1>
        </div>
    )
}
}
export default Test;
复制代码

main.js文件

import React from 'react';
import { render } from 'react-dom';
import Test from './test';// 引入上面的test组件

render(<Test />,document.body);
复制代码

style文件下建立一个main.scss文件

.mainStyle{
.titleColor{
color: chocolate;
}
}
复制代码

ok,一切准备就绪。激动人心的时刻到了。在命令行中执行命令

npm start // 回车
复制代码

最终效果：

能够去改动test.js文件中的文字，在看浏览器，不用手动刷新，会自动刷新的。同时看看咱们的devtool是否是也起到做用了：

万事开头难，到这咱们已经把最可贵一块搞定了。

仍是得提一下，react是有脚手架的：create-react-app.能够一键生成应用咱们上面所配置的东西它都帮你搞定了，有兴趣的能够试试。但仍是建议能了解这个构建过程。

本工程的源码地址：点击源码. 注意 看radme.md文件说明。且下一章的ES6小补源码也在这个源码中test.js文件