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”。