React学习笔记-webpack基本配置

准备工作

首先要确保你的电脑安装了node.js；安装完成后打开命令行窗口运行命令 node -v 可以查看版本号证明安装成功。

这时说明Nodejs下的包管理器 npm 也安装成功。由于使用npm安装模块是从国外服务器下载，受网络影响较大，可能下载较慢或者出现丢包等情况，推荐使用淘宝镜像来安装模块 运行 npm install -g cnpm --registry=https://registry.npm.taobao.org 来全局安装cnpm。

创建项目

• 运行 cnpm init -y 初始化项目
• 在项目根目录下新建 dist 和 src 文件夹 然后在src目录下新建一个 index.html 和 index.js 文件 在 webpack4.X 中有一个很大的特性，就是约定大于配置，默认的打包入口路径是 src/index.js 文件， 打包的输出文件是dist/main.js。（当然如果想要修改默认的打包入口文件的路径的话可以在 webpack.config.js文件中 配置 entry:'url', //入口文件）
• 运行 cnpm i webpack -D cnpm run webpack-cli -D 安装 webpack
• 打开我们的 package.json 文件看到图中代码说明安装成功

  

• 在我们项目根目录下新建一个 webpack.config.js webpack 在执行时，除在命令行传入参数，还可以通过指定的配置文件来执行。默认会搜索当前目录下webpack.config.js。这个文件是一个node.js模块，返回一个json格式的配置对象。

//webpack 默认只能打包处理 .js 后缀明的类型的文件  比如.vue和.png 无法主动处理，所以要配置第三方loader 
//向外暴露一个打包的配置对象 ；因为webpack 是基于node 构建的所以webpack 支持所有的node api 和语法
module.exports = {
   mode:'production',  
   //development  开发环境  未压缩
   //production   生产环境  压缩

   module:{  // 所有第三方模块的匹配规则
       rules:[  //  第三方匹配的规则  use 代表loader 一个可以写成字符串，多个用数组  注意 exclude 排除 node_modules 否则项目无法运行
           {test:/\.js|.jsx$/,use:'babel-loader',exclude:/node_modules/}
       ]
   }
}

• 此时每次运行我们的项目的时候都需要在终端手动输入 webpack 来启动项目，并且此时在我们的 index.html 文件中需要手动引入我们 dist 文件夹下面的 main.js <script src="../dist/main.js"></script> 非常不便于我们的开发
• 运行 cnpm i webpack-dev-servver -D 安装实时热更新插件 打开 package.json 文件看到 webpack-dev-server": "^3.8.0 说明安装成功

//webpack-dev-server 打包好的 main.js 是托管到内存中，并不存在于我们的物理磁盘中，大大的提高了性能
//但是，这个main.js 是存在于我们的项目根目录中，可以直接引用
//<script src="/main.js"></script>

• 打开 package.json 文件下面的 "scripts" 配置 dev

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --hot --host 127.0.0.1"
  },
  //--open 自动打开浏览器  后面可以加浏览器名称
  //--port 3000 端口号
  //--host 127.0.0.1 指定域名

• 我们还可以运行 cnpm i html-webpack-plugin -D 在内存中启动生成index 页面的插件 提高性能,安装成功后打开我们的 webpack.config.js 文件

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin') //导入在内存中自动生成index 页面的插件

//创建一个插件的实例对象
//path.join()的作用是用于连接路径。该方法的主要用途在于，会正确使用当前系统的路径分隔符，Unix系统是"/"，Windows系统是"\"。 
//__dirname 总是指向被执行 js 文件的绝对路径

const htmlPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname,'./src/index.html'),   //源文件
    filename: 'index.html'  //生成的内存中首页的名称
})

//根据template 路径下的首页 生成内存中 的一个index的首页
//使用这个插件之后 可以把index.html中手动引入的main.js注释

module.exports = {
    mode:'production',  
    //development  开发环境  未压缩
    //production   生产环境  压缩

    plugins:[   //注入我们配置好的插件
        htmlPlugin
    ],
    module:{  // 所有第三方模块的匹配规则
        rules:[  //  第三方匹配的规则  use 代表loader 一个可以写成字符串，多个用数组  注意 exclude 排除 node_modules 否则项目无法运行
            {test:/\.js|.jsx$/,use:'babel-loader',exclude:/node_modules/}
        ]
    }
}

结尾

 关于安装时 -D -S 的区别

-S ：是 --save 的缩写对生产环境所需依赖的声明(开发应用中使用的框架，库) 比如：jq，react，vue都需要放到这里面 。 会存放到”dependencies”

-D ：是 --save-dev 的缩写对开发环境所需依赖的声明(构建工具，测试工具) 比如：babel，webpack，都放到当前目录。 会存放到”devDependencies”。