Webpack学习总结-基础遍

小四在线捞鱼
129 阅读4分钟

什么是Webpack？

本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。简单来说，Webpack可以将浏览器不认识的语法编译成浏览器认识的语法（比如 sass、less、ts，es6语法等）。

如何生成一个简易的React脚手架。

  1. 创建一个文件夹。在该文件夹下执行:
npm init -y  （初始化一个项目）
  1. 继续安装webpack以及webpack-cli
npm install webpack webpack-cli --save-dev
  1. 我们在项目下新建一个文件夹src，并在src文件夹下建index.js文件作为入口文件。并建立一个index.less文件。在index.js文件中引入。
在index.less文件中(你可以随便写样式)：

body{
    color: red
}

在index.js文件中输入(你可以随意写元素):
import './index.less'; // 引入index.less文件，我们稍后会有用处
const testRender = () => {
  let dom = document.createElement('div');
  let text = document.createTextNode('Hellow, World')
  return dom.appendChild(text)
}

document.body.appendChild(testRender());
  1. 新建一个新的文件夹public，并在下建index.html文件作为html模板（后续有用）。
  2. 建立一个webpack.config.js配置文件。在该文件中输入：
const path = require("path");
module.exports = {
  entry: './src/index.js', // 入口文件
  output: { // 输出
    filename: 'main.js', // 打包输出文件名
    path: path.resolve(__dirname, 'dist'), // 打包输出文件目录
  }
}
  1. 安装html-webpack-plugin插件，并在webpack.config.js的plugins中进行配置:
npm install html-webpack-plugin --save-dev （安装）
` 注意：`(使用 --save-dev 只会在devDependencies中生成依赖，--save则是在dependencies中生成依赖)。

安装依赖完成在`webpack.config.js`中加入：
const HtmlWebpackPlugin = require('html-webpack-plugin');（引入）
plugins:[
    new HtmlWebpackPlugin({ // 此插件的目的是为了生成html模板以及将打包好的js文件放入生成的html中。（可以不写任何参数）
        template: './pubilc/index.html', // 使用项目中的模板
        inject: true
    }),
]
  1. 为了可以解析jsx以及es6等更高版本的语法，
执行 npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react webpack
安装成功继续在`webpack.config.json`中配置
module: {
    rules: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,  // 排除解析node_modules的文件
      include: path.resolve(__dirname, 'src'), // 只查找src目录下的js文件
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react']
        }
      }
    }]
  },
  1. 此时我们还没有对css做过任何处理，我们需要安装css-loader，less-loader，less
npm install css-loader less less-loader --save-dev
安装完成后我们将在`webpack.config.js`的module.rules中加入
{
    test: /\.css$/i, // 处理.css文件
    use: [MiniCssExtractPlugin.loader, 'css-loader']
}, {
    test: /\.less$/, // 处理.less文件
    use: [{
            loader: MiniCssExtractPlugin.loader
    }, {
            loader: "css-loader"
    }, {
            loader: "less-loader"
    }]	
}

`注意：``MiniCssExtractPlugin`插件是将css独立打包生成，你可以选择安装（文中是安装的）
安装完成后记得在 `webpack.config.js`的 `plugins` 中加入 `new MiniCssExtractPlugin()`配置
  1. 修改package.json中内容。在scripts中加入：
    "build": "webpack --config webpack.config.js"
  1. 至此，我们可以执行npm run build，会在我们的目录下生成一个dist文件夹，dist文件中会存在index.html,main.css,main.js，打开index.html将会显示你在index.js中写的内容。
  2. 接下来我们将安装加入react以及react-dom:
npm install react react-dom --save-dev 安装完成后：
原来的`index.js`文件内容将改成：
 
import React from 'react';
import ReactDom from 'react-dom';

import './index.less';

function App () {
  return <div className="app">Hellow, World</div>
}

ReactDom.render(<App />, document.getElementById('root'));

原先`public/index.html`文件中内容为：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

此时再次执行npm run build 将得到正常的dist文件。
  1. 我们实际开发中一般分为开发环境和生产环境。至此我将用webpack-merge来区分开发环境和生产环境。
1、我们将之前的`webpack.config.js`进行改造，改名为webpack.common.js，内容不用动。
2、分别新建一个`webpack.dev.js`和`webpack.prod.js`。

`webpack.dev.js文件内容为：`
`注意`先安装: `webpack-dev-server`以及`webpack-merge`。
const path = require('path');
const {
    merge
} = require('webpack-merge');
const webpack = require('webpack');
const common = require('./webpack.common.js');

module.exports = merge(common, { // 合并webpack.common.js中的内容
    mode: 'development',
    devServer: { // 这里开发服务器devserver用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
        static: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000, // 项目启动端口
        hot: true, // 开启热更新,
        historyApiFallback: true, // 解决history刷新出现404 
    },
    optimization: { 
        minimize: false, // 开发环境不用进行压缩
    },
    devtool: 'eval-cheap-module-source-map',
    plugins: [
        new webpack.HotModuleReplacementPlugin(), // 热更新
    ]
});

`webpack.prod.js文件内容为(并没有任何内容，你可以随意配置)：`
const {
	merge
} = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: 'production',
    devtool: 'source-map',
});
  1. 修改package.json中内容
修改`scripts`中的内容
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.prod.js",
    "start": "webpack serve --open --config webpack.dev.js"
  },

至此，我们将可以运行npm run dev和正常开发以及使用npm run build进行打包。

完结：

我们只是简单的完成了一个react脚手架的构建，Webpack很多优化以及原理文中并没有涉及到。此文目的只是为了帮助更好的了解webpack的一些基础内容。文中有不足的地方欢迎大家补充。

avatar
文章
阅读
粉丝