webpack 3.X 安装与配置

来源：互联网发布：阿里云连接腾讯云编辑：程序博客网时间：2024/06/05 09:07

组件如何接收属性，所有的属性都可以通过this.props对象获取，像下面这样去使用：

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8" />    <title>Hello World</title>    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>  </head>  <body>    <div id="root"></div>    <script type="text/babel">      class MyComponent extends React.Component{       render(){         return (<h1> hello world {this.props.name}</h1> )         };      }      ReactDOM.render(        React.createElement(MyComponent,          {            name:"Stan"          }        ),        document.getElementById('root')      );    </script>  </body></html>

官网上说 React is pretty flexible but it has a single strict rule:

All React components must act like pure functions with respect to their props.

props are read-only,还不太清晰，后面再回过头来看。当开始学习propTypes时，发现遇到了很大的阻碍，因我也是Sublime新手，不知道在Sublime中如何去做一些依赖，建一个工程，又尝试了WebStorm，VScode，还是要借助于IDE，学习一下，React的学习先暂停一下，学习一下VScode，还有Webpack，后面一起进行，总之学习不能停。

下面先总结一下webpack的入门：
如果你进到webpack的官网，打开它的documentation页面，你会看到：

bundle your assets/scripts/images/styles.

你的那些.js/.css/.png/….它们之间存在有依赖，用webpack 绑到一起后，再使用，变得简洁，这是我最开始的理解。我最后还是下载了VScode

新建一个项目，先要确保你已经安装了node 和 npm ,我的mac上的node 和 npm的版本分别是：

而后需要做的是：

npm init

可以先不用过程，直接全部回车结束后，会生成一个package.json的文件，它长这样：

{  "name": "webpack-stater",  "version": "1.0.0",  "description": "explore webpack",  "main": "index.js",  "scripts": {    "dev": "webpack -d --watch",    "prot": "webpack -d"  },  "repository": {    "type": "git",    "url": "git+ssh://git@github.com/stanbers/git-tutorial.git"  },  "keywords": [    "self"  ],  "author": "stan",  "license": "ISC",  "bugs": {    "url": "https://github.com/stanbers/git-tutorial/issues"  },  "homepage": "https://github.com/stanbers/git-tutorial#readme",  "devDependencies": {    "webpack": "^3.8.1"  }}

再接下来要去安装webpack ,使用命令：

npm i -D webpack

如果第一次安装，可以把它安装成全局的：

npm -g i webpack

安装全局的webpack可能会提示你安装失败，提示你没有权限，此时把sudo加上就可以了：

sudo npm -g i webpack

然后会提示输入mac的密码，之后就可以正常安装了，安装完成后，可以从上面的package.json文件中看到你安装的最新的webpack 版本，可以看到我安装的是

"devDependencies": {    "webpack": "^3.8.1"  }

如果你想看以前的version ，可以用下面的命令：

npm view webpack versions

可以看到更多的版本：

这里不会显示所有，如果你想看所有的版本，可以用下面这个命令：

npm view webpack version --json

然后就可以看到全部了：

如果你想指定哪个版本，可以用这个命令：

npm i -D webpack@versionnumber

到这里就可以用webpack了，在项目下建立两个文件夹，每个下面分别新建一个js文件，分别是src/app.js 和dis/app.bundle.js

在app.js中：

alert("hello webpack");

然后在命令行：

webpack ./src/app.js ./dist/app.bundle.js

而后但可以在app.bundle.js中看到上面的alert():

eval("alert(\"hello webpack\");//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMC5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL3NyYy9hcHAuanM/N2FjOSJdLCJzb3VyY2VzQ29udGVudCI6WyJhbGVydChcImhlbGxvIHdlYnBhY2tcIik7XG5cblxuLy8vLy8vLy8vLy8vLy8vLy8vXG4vLyBXRUJQQUNLIEZPT1RFUlxuLy8gLi9zcmMvYXBwLmpzXG4vLyBtb2R1bGUgaWQgPSAwXG4vLyBtb2R1bGUgY2h1bmtzID0gMCJdLCJtYXBwaW5ncyI6IkFBQUEiLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///0\n");

下面的命令：

webpack ./src/app.js ./dist/app.bundle.js -p

-p表示生产环境压缩的代码

webpack ./src/app.js ./dist/app.bundle.js -p --watch

加上watch后，是去监视app.js，如果app.js更新了，那么app.bundle.js也会实时更新

上面的两种bundle，也可能选择用配置文件的方式来做相同的操作，创建一个配置文件：webpack.config.js

module.exports = {    entry: "./src/app.js",    output:{        filename: "./dist/app.bundle.js"    }}

然后在package.json中更新”scripts”中的代码：

  "scripts": {    "dev": "webpack -d --watch",    "prot": "webpack -d"  },

dev代表开发，prot代表生产
这个时候当运行:

npm run dev

它是等价于

webpack ./src/app.js ./dist/app.bundle.js -p --watch

最后项目架构就是这样：

到此了解完了webpack的安装与配置，及运行一个小的demo，后面还有更多需要学习的。

阅读全文

0 0