初学webpack

--这篇学习笔记，是根据简书zhangwang的的文章来进行学习的

依照惯例，webpack是模块打包工具。我的理解就是wbepack会分析你项目的结构，然后把那些浏览器可能没办法直接运行的（sass、es6（某E））转换成浏览器可以直接运行的格式。

首先是第一步安装：

yarn global add webpack//使用yarn来安装
npm install webpack -g//使用npm来安装

公司的电脑装webpack的时候，装了全局的webpack但是使用的时候还是会显示webpack不是内部或外部命令，也不是可运行的程序或批处理文件。

解决方法是，配置系统变量，手动把webpack的路径放在系统变量path里面就解决了

（用的是yarn.因为npm安装都是能出一堆的错，换了淘宝源还是没用，果断，先放弃！）C:AppDataLocalYarnconfigglobal ode_modules.bin （路径是这个）

接着就是开始使用webpack了，在使用之前的准备

第一步新建一个文件夹，然后在下面的Terminal输入

yarn init//使用yarn进行初始化
npm init//使用npm进行初始化

因为只是学习，所以要输入的东西我都是一路空格下来，这时候在新建好的文件夹下就会出现一个pack.json的文件夹(这个目录是我之前学react的时候建的...请无视这个目录名的意思)

{
  "name": "react-app",//目录名
  "version": "1.0.0",//版本号
  "main": "index.js",//程序主入口模块的ID，如果别的用户需要你的包，当用户调用的时候，返回的就是这个模块的导出
  "license": "MIT"//MIT许可证
}

然后在新建的文件夹里，新建文件，react-app文件夹下的目录结构如下

然后往我们的项目中加入webpack的依赖包

yarn add webpack//yarn的方式
npm install --save-dev webpack//npm的方式

npm的命令里面--save-dev是在pack.json文件中添加模块和版本号，所以json文件就变成了这样

{
  "name": "react-app",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^3.10.0"
  }
}

devDependencies是当前包所依赖的其他包，这里就是依赖了webpack的3.10.0的版本

然后在index.html中写下代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id='root'></div>
<script src="bundle.js"></script>
</body> 
</html>

bundle.js是一会我们webpack打包后会生成的js文件。为什么会取这个名字捏，这跟后面的配置文件有关系

接着我们来写test.js和main.js里面的内容

//test.js
module.exports = function() {
    var test = document.createElement('div');
    test.textContent = "Hello I am test!";
    return test;
};

//main.js
const test = require('./test.js');
document.querySelector("#root").appendChild(test());

接着就要开始打包了

首先我们先要配置一个webpack的配置文件，取名为webpack.config.js

module.exports = {
  entry:  __dirname + "/app/main.js",//入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

看到没有！bundle.js就是在这里配置的。

配置完文件以后，只需要在控制台输入命令 webpack就好了（此处我的webpack安装的是全局的，所以只需要输入webpack）,之后就打包成功了。打开你的bundle.js就能看到代码，用浏览器打开你的index.html，就可以看见Hello I am test!了

除了通过在终端输入webpack打包，还可以通过配置pack.json文件来进行打包

{
  "name": "react-app",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "webpack": "^3.10.0"
  },
  "scripts":{
    "start":"webpack"
  }
}

这时候我们在控制台输入

yarn start

就会开始进行打包了。

下一个知识点就是使用webpack来构建本地服务器(基于node.js)

这里首先要先安装一个项目依赖webpack-dev-server

yarn add webpack-dev-server

我们可以从pack.json中看到webpack-dev-server的版本号

"dependencies": {
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.1"
  }

webpack-dev-server的配置也要在webpack.config.js里面进行，

其中主要的配置选项有

contentBase:配置要为哪个文件建立本地服务器

port:配置监听端口，默认为8080

inline:true(配置当源文件改变的时候，浏览器会自动刷新)

historyApiFallBack:true（所有跳转指向index.html）这一个配置我还不理解。后面理解了会进行补充

接着我们就来配置刚刚那个项目的本地服务器

devServer:{
    contentBase:"./public",
    inline:true,
    historyApiFallback:true,
    port:"3000"
}

然后在pack.json中进行配置，用于开启本地服务区

"scripts": {
    "start": "webpack",
    "server": "webpack-dev-server --open"
  }

最后在控制台输入命令

yarn run server

打包编译完成之后，就可以在http://localhost:3000/看到打包好的效果啦,然后去改动js的话，可以看到页面会自动刷新！

接着就是Loader，我觉得loader就是调用外部方法的时候使用的。他的配置选项有：

test:所需要处理的文件的拓展名的正则表达式（= =突然发现自己还需要努力的看一看正则！猝）

loader:loader的名称（比如babel-loader(e6=>es5)）

include:手动添加上必须处理的文件

exclude:屏蔽不需要处理的文件

query:为loaders提供额外的设置选项

模块的配置具体代码如下

module: {
        rules: [
            {
                test: /.js$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env"
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    }