Webpack开发环境配置

最新推荐文章于 2023-01-28 21:28:48 发布
最新推荐文章于 2023-01-28 21:28:48 发布
阅读量426 收藏
点赞数
分类专栏： webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36801250/article/details/105664335
版权

手动构建Webpack开发环境
WebPack基础教程
Webpack开发环境配置
webpack+sass+babel+postcss配置
Webpack多页面配置

开发环境配置

接入门教程一

处理CSS的兼容性

  1. 通过postcss-loader来处理css的兼容性

    我们可以通过post-css来处理我们的css兼容性，通过autoprefixer这个插件来让webpack自动为我们的css添加前缀

    安装postcss-loader与autoprefixer

    $ cnpm install postcss-loader autoprefixer --save-dev

  2. 安装完成以后，我们需要在webpack.config.dev.js中去配置我们的文件

    {
    test: /\.scss$/,
        use: [
            "style-loader",
            "css-loader",
            {
                loader: "postcss-loader",
                options: {
                    config: {
                        path: path.join(__dirname, "./postcss.config.js")
                    }
                }
            },
            "sass-loader"
        ]
}

    说明：上面的代码，我们配置制到module里面的rules这个属性里在，我们处理了scss的文件，同时，在loader里面，我们添加了一项postcss-loader这个文件，在里面，我们配置了一项config。这个config就是postcss的配置，告诉webpack要怎么要去处理我们的css兼容性

  3. 在项目的根目录创建postcss.config.js文件，打开文件，去添加如下内容

    var postcssConfig = {
    "plugins": {
        "autoprefixer": {
            //正常情况之下，我们应该配置一个浏览器列表，但是，我不推荐大家在这里配置
            //babel也需要一个浏览器列表

        }
    }
}
module.exports = postcssConfig;
//module.exports={}

    上面的代码是postcss.config.js的配置文件，在里面，我们配置了一个plugins插件，同时，指向了一个autoprefixer这个插件，这个插件的作用就是把我们的css前缀自动补全

  4. 在package.json里在，添加一个节点browserslist，告诉webpack我们要使用那些浏览器的兼容性

    "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
]

  5. 这个时候，我们再看到的CSS就有经过兼容性处理了。如下图所示：

在这里插入图片描述

处理JS的兼容性

我们的CSS兼容性我们可以通过webpack来进行处理，同时，我们的css的兼容性也可以通过webpack来进行处理！同样，处理这个兼容性，我们也需要一个第三方的插件，这个插件就是我们的babel

babel是一个专门用于处理我们的es6代码的插件，它有一个特别重要的功能就是把我们的es6代码转换为我们浏览器所能够运行的普通代码

  1. 安装babel相关插件

    $ cnpm install babel-core babel-loader

    说明：上面的两个包就是专门用来处理我们的es6的两个babel插件

  2. 配置webpack.config.dev.js文件，让babel去处理我们的js代码

    {
    test: /\.js$/,
        use: [
            "babel-loader"
        ],
    exclude: /node_modules/
}

    说明：上面的代码告诉了webpack如何去处理我们的js代码，同时，最后一个exclude告诉webpack不要去处理node_modules里面的代码

  3. 在项目的根目录下面创建.babelrc的文件，这个文件是专门用来告诉webpack以一种什么样的规则去处理我们的js代码

    .babelrc的配置如下

    {
    "presets": [
        "env", "stage-0"
    ]
}

    说明：babel会以我们package.json下面的browserslist里面的配置来处理我们的JS兼容性

  4. 因为上面的.babelrc配置里面使用了env与stage-0这两个处理规则，所以，我们需要安装这两个模块

    $ cnpm install babel-preset-env babel-preset-stage-0 --save-dev

  5. 安装babel专门用来处理异步async与await的模块

    在babel里面，有一套专门用来处理异步操作的模块，这个模块叫babel-polyfill，现在，我们安装这个模块，用来去处理我们在开发过程当中所遇到的异步操作

    $ cnpm install babel-polyfill --save-dev

  6. 在webpack.config.dev.js当中去配置babel-polyfill的配置

    babel-polyfill需要配置在程序的启动的地方，这个时候，我们需要在webpack.config.dev.js里面的入口entry处去修改代码，将entry修改如下

    entry: ["babel-polyfill", path.join(__dirname, "./src/js/main.js")]

经过上面的处理以后，我们就已经可以去让我们的JS代码经过webpack打包，让babel去转换，最终生成一个能够在浏览器上面运行的代码了

webpack生产环境的配置

在webpack里在，我们的操作一直都是在生产环境下面进行，如果要让我们编写好的html与css最终生成一个文件，这个时候，我们就需要在webpack当中去配置我们的生产环境

webpack的生产环境配置与开发环境大致相同，步骤如下：

  1. 首先，我们新建一个webpack的生产环境配置文件webpack.config.pro.js,将webpack.config.dev.js中的代码复制过来（在此处需要注意，不要把devServer里面的东西复制过来了，这个devServer是webpack开发环境独有的）

  2. 在webpack.config.pro.js的配置文件里面，我们要做到CSS样式与JS代码分离，就需要使用一个第三方插件包，这个插件叫extract-text-webpack-plugin,现在，我们安装这个插件

    $ cnpm install extract-text-webpack-plugin --save-dev

  3. 在webpack.config.pro.js时面去导入刚刚安装的模块extract-text-webpack-plugin

    const ExtractPlugin=require('extract-text-webpack-plugin');

  4. 修改webpack.config.pro.js里面module下的rules里面的配置文件，把css以及scss的处理规则更改为如下：

    {
    test: /\.scss$/,
        use: ExtractPlugin.extract({
            fallback: "style-loader",
            use: [{
                loader: "css-loader",
                options: {
                    minimize: true //生成的CSS代码进行压缩处理
                }
            },
                  {
                      loader: "postcss-loader",
                      options: {
                          config: {
                              path: path.join(__dirname, "./postcss.config.js")
                          }
                      }
                  },
                  "sass-loader"
                 ]
        })
}

    说明：在上面的代码当中，我们使用了ExtractPlugin这一个插件，这个插件就是我们刚刚在第三步的时候导入的插件，在css-loader里面，我们使用了个选项minimize:true的这个选项，这个选项的作用就是让生成的CSS代码做压缩处理

  5. 在webpack.config.pro.js的plugins的选项里面，添加ExtractPlugin插件，告诉webpack最终生成的css文件的名称是什么

    plugins: [
    new HTMLPlugin({
    template: "index.html",
    filename: "aaa.html",
    inject: true
    }),
    new ExtractPlugin("index.css"), //指定新生成的css的文件名为index.css
]

    代码说明：添加的new ExtractPlugin("index.css")代码新生成的css文件为index.css

  6. 为生成的JS代码做压缩处理

    我们的css代码可以做到压缩处理，同样，我们的JS代码也可以进行压缩，但是在压缩的过程当中，我们需要使用一个第三方的插件，这个插件就是uglifyjs-webpack-plugin,现在我们安装这个插件

    $ cnpm install uglifyjs-webpack-plugin --save-dev

  7. 在webpack.config.pro.js的这个配置文件里面，我们导入刚刚安装的插件，代码如下:

    const uglifyjsPlugin = require('uglifyjs-webpack-plugin');

  8. 在webpack.config.pro.js的plugins里面，添加刚刚导入的插件，最终代码如下：

    plugins: [
    new HTMLPlugin({
        template: "index.html",
        filename: "aaa.html",
        inject: true
    }),
    new ExtractPlugin("index.css"), //指定新生成的css的文件名为index.css
    new uglifyjsPlugin()
]

  9. 在package.json里面，添加生成的命令

    在package.json的scripts的节点下面添加下面的命令中的build命令

    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config webpack.config.dev.js",
    "build": "webpack --config webpack.config.pro.js"
  }

至此，我们的生产环境就全部完成了,现在，我将开发环境的webpack.config.dev.js的代码与生产环境的webpack.config.pro.js的代码放到下面

  • webpack.config.dev.js代码

    //开发环境
const path = require('path');
const HTMLPlugin = require('html-webpack-plugin');
var config = {
    entry: ["babel-polyfill", path.join(__dirname, "./src/js/main.js")],
    output: {
        filename: "bundle.js",
        path: path.join(__dirname, "/dist")
    },
    module: {
        rules: [{
            test: /\.js$/,
            use: [
                "babel-loader"
            ],
            exclude: /node_modules/
        }, {
            test: /\.scss$/,
            use: [
                "style-loader",
                "css-loader",
                {
                    loader: "postcss-loader",
                    options: {
                        config: {
                            path: path.join(__dirname, "./postcss.config.js")
                        }
                    }
                },
                "sass-loader"
            ]
        }, {
            test: /\.(jpg|jpeg|svg|bmp|gif|icon|png)$/,
            use: [{
                loader: "url-loader",
                options: {
                    name: '[name]-abc.[ext]'
                }
            }]
        }]
    },
    plugins: [
        new HTMLPlugin({
            template: "index.html",
            inject: true
        })
    ],
    devServer: {
        host: "0.0.0.0",
        port: 9999,
        overlay: {
            errors: true //将错误信息抛出到页面上面，提示出来
        }
    }
}
module.exports = config;

  • webpack.config.pro.js代码

    //生产环境
//开发环境
const path = require('path');
const HTMLPlugin = require('html-webpack-plugin');
const ExtractPlugin = require('extract-text-webpack-plugin');
const uglifyjsPlugin = require('uglifyjs-webpack-plugin');
var config = {
    entry: ["babel-polyfill", path.join(__dirname, "./src/js/main.js")],
    output: {
        filename: "bundle.js",
        path: path.join(__dirname, "/dist")
    },
    module: {
        rules: [{
            test: /\.js$/,
            use: [
                "babel-loader"
            ],
            exclude: /node_modules/
        }, {
            test: /\.scss$/,
            use: ExtractPlugin.extract({
                fallback: "style-loader",
                use: [{
                        loader: "css-loader",
                        options: {
                            minimize: true //生成的CSS代码进行压缩处理
                        }
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            config: {
                                path: path.join(__dirname, "./postcss.config.js")
                            }
                        }
                    },
                    "sass-loader"
                ]
            })
        }, {
            test: /\.(jpg|jpeg|svg|bmp|gif|icon|png)$/,
            use: [{
                loader: "url-loader",
                options: {
                    name: '[name]-abc.[ext]' //在生产环境下面，生成的新的文件的名称
                }
            }]
        }]
    },
    plugins: [
        new HTMLPlugin({
            template: "index.html",
            filename: "aaa.html",
            inject: true
        }),
        new ExtractPlugin("index.css"), //指定新生成的css的文件名为index.css
        new uglifyjsPlugin()
    ]
}
module.exports = config;

    ​

不起眼的皮皮虾
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack4.x开发环境配置详解
10-18
主要介绍了webpack4.x开发环境配置方法,结合实例形式详细分析了webpack4.x的具体安装、项目创建、打包操作等相关问题与处理技巧,需要的朋友可以参考下
webpack 开发环境的基本配置
weixin_66557048的博客
03-28 135
创建文件 webpack.config.js。运行指令: webpack。结论: 此时功能与上节一致。下载安装 loader 包。下载安装 plugin 包。运行指令: webpack。
webpack 生产 开发 公共环境下的配置
qq_66349348的博客
11-04 175
webpack 生产 开发 公共环境下的配置
webpack之开发环境配置
weixin_50238437的博客
09-13 1202
webpack之开发环境配置
webpack开发环境配置
前端、python爱好者
12-22 1431
webpack开发基本配置
详解使用WebPack搭建React开发环境
01-19
第一步、基础环境 初始化 项目初始化 npm init -y 安装webpack npm i webpack 安装react npm i react react-dom -s 项目基础框架 入口文件(src/index.js) import React from 'react' import {render} from '...
webpack开发环境和生产环境的深入理解
01-19
以前自己写一小项目时，webpack的配置基本就是一套配置，没有考虑生产环境和开发环境的区分，最近在做一个复杂的商城项目接触到了webpack的高级配置，经过两天的研究，写出了一份目前来说比叫满意的配置，在这里分享...
webpack vue项目开发环境局域网访问方法
08-27
下面小编就为大家分享一篇webpack vue项目开发环境局域网访问方法，具有很好的参考价值，希望对大家有所帮助，一起跟随小编过来看看吧
利用webpack搭建前端开发环境
08-07
利用webpack搭建前端开发环境，支持css，sass，image，es6，pug，webpack-dev-server等等！
【Vue】Webpack配置开发环境与正式环境:
SunPeng的博客
11-21 2330
【Vue】Webpack配置开发环境与正式环境:
webpack常用配置（一）之搭建环境及初始化配置
HertzDL的博客
12-01 373
webpack常用配置（一）之搭建环境及初始化配置
webpack基础配置教程
pscool的博客
12-08 758
分别使用commonJs和ES6模块化语法编写js代码。首先，安装webpack4.0版本。6. 6.压缩html、压缩js。5.打包less、css资源。3.处理js和json文件。4.webpack配置文件。8.打包html中的图片。1.提取css为单独文件。5. 5.js兼容性处理。什么是webpack?对plugins的理解。4. 4.js语法转换。对loader的理解。6.打包html文件。7.打包样式中的图片。2.css兼容性处理。
Vue基础--webpack介绍以及基础配置
烟渺睿晨的博客
08-12 6021
概念：webpack 是前端项目工程化的具体解决方案。主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆，处理浏览器端JavaScript的兼容性、性能优化等强大的功能。好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。注意：目前Vue、React等前端项目，基本上都是基于 webpack 进行工程化开发的。在 webpack.config.js 配置文件中，通过entry节点指定打包的入口、通过output节点指定打包的出口。...
webpack学习笔记
weixin_47191446的博客
01-28 586
webpack的作用，什么是工程化？ - 模块化 - js的模块化、css的模块化、资源的模块化； - 组件化 - 复用现有的UI结构、样式、行为； - 规范化 - 目录结构的划分、编码规范化、接口规范化、文档规划化、Git分支管理； - 自动化 - 自动化构建、自动部署、自动化测试
【Webpack】基础知识点
Primary_Insist的博客
03-06 1300
目录 一、相关概念 二、相关操作 Ⅰ.两个js文件打包成1个js文件 Ⅱ.自动生成html文件 Ⅲ.打包css文件 Ⅳ.打包less文件 Ⅴ.打包图片文件 Ⅵ.处理字体图标 Ⅶ.降级js语法 三、开发服务器 一、相关概念 本质：一个第三方模块包，用于分析，并打包代码 支持所有类型的文件的打包 支持less/sass=>css 支持ES5/7/8=>ES5 webpack打包流程： 初始化包...
学习之webpack基础配置
那一日面朝大海的博客
04-15 1075
一、webpack 简介 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 简单说，webpack可以看做是一个模块打包机，主要作用就是:分析你的项目结构，找到JavaScript模块以及一些浏览器不能直接运行的拓展语言(sass、less、typesc.
黑马webpack总结
qq_44287165的博客
09-13 439
webpack的基本使用 1，什么是webpack？ 概念：webpack 是前端项目工程化的具体解决方案。 主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。 好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。 注意：目前 Vue，React 等前端项目，基本上都是基于 webpack 进行工程化开发的 2，在项目中安装webpack 在终端运行如下的命令，安装 webpack 相
webpack—基础配置
weixin_47128751的博客
04-29 711
1.webpack 命令 官方解释：webpack是一个现代的JavaScript应用的静态模块打包工具。 （1）使用全局webpack webpack4以上版本 webpack-cli --entry ./app.js --output build.js webpack4以下版本 webpack --entry ./app.js --output build.js （2）使用本地webpack package.json文件中 增加下面命令，打包会优先使用项目中的webpack打包。使用默认配置
webpack搭建开发环境
最新发布
10-14
要使用webpack搭建开发环境，需要进行以下步骤： 1. 安装Node.js和npm 2. 在项目根目录下初始化npm：`npm init` 3. 安装webpack和webpack-cli：`npm install webpack webpack-cli --save-dev` 4. 创建webpack配置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值