webpack&&react搭建项目
2017-06-14 本文已影响0人
思了个麦
最近面试一直被问到webpack的东西，虽然项目一直在用，真当被问到关于webpack的原理也是一脸懵逼。那么就自己手动实践一下吧。
webpack 安装和配置
那么在安装wepack之前你需要什么呢?
- nodejs
- npm（装node的时候会自带安装上的）
查看版本
查看版本，看你是否安装成功。
成功之后，新建一个文件夹，然后执行npm init。
执行npm init
一直回车就好，这些值后面都是可以配置的。然后看这个文件夹，你会发现多了一个文件
package.json。
package.json
-
name和version是必须填写的字段，其他都是可选的。 -
scripts是一个由脚本命令组成的hash对象，他们在包不同的生命周期中被执行。key是生命周期事件，value是要运行的命令。scripts的配置因为常用到，所以提一下。
在安装webpack之前想先介绍下package.json中的devDependencies和dependencies。
dependencies-
–save会把依赖包名称添加到package.json文件dependencies下 - 是我们开发时用的依赖项，它们不会被部署到生产环境
devDependencies-
–save-dev则添加到package.json文件devDependencies下 - 是我们生产环境中需要的依赖，即正常运行该包时所需要的依赖项
安装webpack
执行 npm install webpack --save-dev，再看package.json，webpack被安装到devDependencies下了
package.json
然后再手动配置一下
scripts
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
目录
目录
-
src里面放项目代码，也就是开发时候的代码啦 -
dist文件放webpack编译后的东西，也就是最后发布需要的东西
dist里面需要有一个html，它的目的就是加载打包后的js文件，一般长这样
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>
-
webpack.config.js配置webpack的地方啦
webpack配置
// webpack.config.js
module.exports = {
entry: __dirname + "/src/app/app.js", //入口文件
output: {
path: __dirname + "/dist", //打包后的文件存放的地方
filename: "app.js" //打包后输出文件的文件名
}
}
-
__dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录 entry- 字符串形式
entry:"模块"
这个字符串对应的模块会在启动的时候加载 - 数组形式
entry: ['模块1',''模块2'']
这个数组内所有模块会在启动的时候加载，数组的最后一个元素作为export - 对象形式
entry: {page1: "模块1",page2: ["模块2", "模块3"]}
可以构建多个bundle，多用于多页面应用
关于entry可以参考阅读令人困惑的webpack之entry output-
path和publicPath的区别
path只告诉webpack最后输出的文件放在哪里。而publicPath是被许多Webpack的插件用于在生产模式下更新内嵌到css、html文件里的url值
// 开发环境
.image {
background-image: url('./test.png');
}
// 生产环境
.image {
background-image: url('https://someCDN/test.png');
}
- 关于
[name],[hash]和[chunkhash]
[name]就是在entry里边的属性名
[hash]是每次webpack构建时都会生成一个唯一的哈希值用来构成文件名
[chunkhash]则是 webpack根据文件内容生成哈希值
小结
到此我们已经完成了最简单的webpack.config.js的配置，通过这个配置webpack可以将src/app/app.js打包成dist/app.js了
关于react、webpack-dev-server以及source map的内容后面再补上。
