使用webpack+ts搭建项目

zwtzzwwtt
929 阅读3分钟

1.npm初始化

npm init
npm install --save-dev webpack webpack-cli

2.新建目录结构

1.png
（ 简易版，仅供参考 ）

3.配置mode、入口文件和输出文件

const path = require("path");

module.exports = {
  // 模式 development \ production
  mode: "development",
  // 入口文件
  entry: path.resolve(__dirname, "src/index.js"),
  // 输出文件地址及文件名称
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "build.[contenthash:10].js",
  },
}

4.引入HtmlWebpackPlugin

该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    plugins:[
        new HtmlWebpackPlugin({
            // 模板文件地址
            template: path.resolve(__dirname, "public/index.html"),
            // 打包生成的html文件的名称
            filename: "index.html",
            // 压缩html打包文件
            minify:{
                // 移除空格
                collapseWhitespace: true,
                // 移除注释
                removeComments: true,
            }
        })
    ]
}

5.引入CleanWebpackPlugin

用于删除/清理之前的构建文件夹。

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports={
    plugins:[
        new CleanWebpackPlugin()
    ]
}

6.配置webpack-dev-server

将webpack与提供实时重载的开发服务器一起使用，自带了 HMR 功能。

  • --open：是自动打开浏览器，后面加上相应的浏览器名字就能打开不同的浏览器
  • --port 3000：代表运行在3000的端口
  • --progress：代表进度
  • ​--host：指定端口号，一般默认的都是localhost的端口，–host+空格+后面加上端口号就可以改变端口号：--host 129.0.0.1 package.json文件中添加 dev 配置。
    （此处报错大概率是由于webpack-dev-server和webpack-cli的版本相互不兼容产生的。）
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config webpack.config.js --progress  --port 8000",
    "webpack": "webpack --progress"
},

7.配置样式相关loader

当某种文件的处理存在多个loader时，执行顺序为数组从右往左。

css样式（style-loader、css-loader）

module.exports = {
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    }
}

less样式（style-loader、css-loader、less-loader）

module.exports = {
    module:{
        rules:[
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            }
        ]
    }
}

8.配置样式相关插件，优化样式打包

使用MiniCssExtractPlugin

将 css 从打包的 js 文件中提取出来，加快页面响应速度

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports={
    module:{
         rules:[
            {
                test:/\.css$/,
                use:[
                     // 将样式提取出来
                    MiniCssExtractPlugin.loader,
                    "css-loader"
                ]
            },
            {
                test:/\.less$/,
                use:[
                    // 将样式提取出来
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    'less-loader'
                ]
            }
         ] 
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename: "bundle.[contenthash:10].css",
        })
    ]
}

使用postcss-loader

让样式兼容不同的浏览器

webpack.config.js

const CommonCss = [
  MiniCssExtractPlugin.loader,
  "css-loader",
  {
    loader: "postcss-loader",
    options: {
      postcssOptions: {
        // 自动补齐前缀
        plugins: [["postcss-preset-env"]],
      },
    },
  },
];

module.exports = {
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[...CommonCss]
            },
            {
                test:/\.less$/,
                use:[...CommonCss,'less-loader']
            }
        ]
    }
}

package.json

配置需要兼容的浏览器

"browserslist": [
    ">=1%", // 份额大于1%
    "last 2 versions"  // 最新的两个版本
]

使用OptimizeCssAssetsWebpackPlugin

压缩打包后的 css 样式文件

const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");

module.exports={
    plugins:[
        new OptimizeCssAssetsWebpackPlugin()
    ]
}

9.配置图片相关loader（url-loader、file-loader）

// url-loader 已废弃，建议使用 asset-module
module.exports = {
    module:{
        rules:[
            {
                test:/\.(png|jpg|gif)$/,
                loader: "url-loader",
                options:{
                    // 当图片小于8K时，将图片进行base64处理，从而减少对于图片的请求
                    limit: 8 * 1024,
                    name: path.posix.join("images/[hash:10].[ext]"),
                }
            }
        ]
    }
}

10.配置JS相关loader（babel-loader、core-js）

module.exports = {
    module:{
        rules:[
            // @babel/preset-env:基本的js兼容性处理
            // core-js 懒加载式得去做浏览器得兼容性处理,加快页面的响应
            {
                test:/\.js$/,
                include: path.resolve(__dirname, "src"),
                loader: "babel-loader",
                options:{
                    presets:[
                        [
                            "@babel/preset-env",
                            {
                                useBuiltIns: "usage",
                                corejs:{
                                    version: 3,
                                },
                                targets:{
                                    chrome: "60",
                                    ie: "8",
                                    edge: "17",
                                }
                            }
                        ]
                    ],
                    // 开启babel缓存
                    // 第二次构建时会读取之前的缓存
                    cacheDirectory: true,
                }
            }
        ]
    }
}

11.配置ts相关loader（babel-loader、ts-loader）

npm install --save-dev typescript @types/react @types/react-dom ts-loader

module.exports = {
    module:{
        rules:[
            {
                test:/\.ts$/,
                include: path.resolve(__dirname, "src"),
                use: ["babel-loader", "ts-loader"],
            }
        ]
    }
}

12.配置文件夹别名

module.exports={
    resolve:{
        alias:{
            "@assets": path.resolve(__dirname, "src/assets"),
            "@store": path.resolve(__dirname, "src/store"),
            "@style": path.resolve(__dirname, "src/style"),
        }
    }
}

13.代码块分离打包

module.exports={
    // code split代码分离
    // 将引入的代码单独打包成一个chunk输出
    optimization:{
        splitChunks:{
            chunks: "all",
        }
    }
}

14.source-map

提供源代码到构建后代码的映射技术。

主要用于调试，现在代码都会经过压缩混淆，这样报错提示会很难定位代码，sourcemap就是一个信息文件，里面存储着位置信息，也就是说，转换后的代码的每个位置，所对应的转换前的位置。

2.png

module.exports={
    // 开发环境推荐使用  eval-source-map
    // 生产环境——调试 source-map / cheap-module-source-map
    // 生产环境——上线 nosources-source-map  /   hidden-source-map(只隐藏源代码)
    devtool: "eval-source-map",
}
avatar
文章
阅读
粉丝