webpack&&react搭建项目

最近面试一直被问到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


  
    
    
  
  
    

    
  

• 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的内容后面再补上。