webpack使用

转载 · 奋斗的小小小兔子 · 2020-06-19 · 原文

一、新建应用 test，简单配置webpack

控制台，创建应用文件夹
```
mkdir test
cd test
```
控制台，新建src源文件，及index.js源文件
```
mkdir src
touch src/index.js
```
打开空的index.js文件，输入
```
document.write('hello world");
```
控制台，创建应用的配置文件 package.json
```
npm init -y
```
npm init命令会在当前目录生成一个package.json文件，这个文件中会记录一些关于项目的信息。执行该命令后终端会询问比如：项目的作者，git地址，入口文件、命令设置、项目名称和版本号等等
。而如果想要偷懒步免去一直按 enter，在命令后追加 —yes 参数即可，其作用与一路下一步相同。npm init —yes 简写，npm init -y
控制台，创建webpack的配置文件
在当前目录新建webpack.config.js文件
```
touch webpack.config.js
```
安装应用依赖
把新的js语法编译成当前的浏览器能够识别的语法格式，安装baberl依赖。
```
npm i webpack webpack-cli babel-core babel-preset-env babel-loader -D
```
—save-dev 、 -D意思是将模块版本信息保存到devDependencies（开发环境依赖）中，即package.json文件的devDependencies字段中；

编写 webpack.config.js 内容

const path = require('path');
const config = {
 mode: 'development',
 entry: path.resolve(__dirname, 'src/index.js'),
 output: {
     path: path.resolve(__dirname, 'dist'),
     filename: 'main.js'
 },
 module: {
     rules: [{
         test: /\.js$/,
         exclude: /node_modules/,
         use: {
             loader: 'babel-loader',
             options: {
                 presets: ['env'],
             }
         }
     }]
 },
 devtool: 'inline-source-map'
};
module.exports = config;

其中path是nodejs的path模块，用来处理路径信息；
entry是入口文件，当前目录下的src/index.js；
module-rules-test 是匹配所有的js文件，使用babel；
exclude是忽略node_modules文件夹下；
devtool 生成sourcemap方便调试，具体查看webpack官网介绍

为了方便调用webpack，编写npm script命令
package.json文件中添加start
-w 表示js文件更改，自动进行编译
```
"scripts": {
 "start": "webpack -w",    
 "test": "echo \"Error: no test specified\" && exit 1"
},
```
控制台，运行
```
npm start
```

在根目录下新建index.html文件

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="dist/main.js"></script>
</body>
</html>

二、结合mobx和react

控制台，安装react 依赖
```
npm i react react-dom prop-types mobx-react -S
```
-save、-S参数意思是把模块的版本信息保存到dependencies（生产环境依赖）中，即package.json文件的dependencies字段中
修改src/index.js文件的后缀名为.jsx

修改webpack配置
webpack.config.js中修改入口文件entry、和使用babel文件test

....
entry: path.resolve(__dirname, 'src/index.jsx'),
....
module: {
     rules: [{
         test: /\.jsx$/,  
         ...
     }]
 },
};

← 如何在Mac上通过LMX训练自己的模型 → mysql事务隔离级别与设置