前端webpack5+打包工具基础入门css压缩babel配置ES6代码转ES5搭建简单的线上环境完整流程（一）

最新推荐文章于 2024-04-09 10:52:06 发布

前端开发者赖毛

最新推荐文章于 2024-04-09 10:52:06 发布

阅读量865

点赞数

文章标签：前端 webpack babel

本文链接：https://blog.csdn.net/laimaodashuaige/article/details/117323839

版权

所需软件：

vscode，官网链接下载：https://code.visualstudio.com/；（也可以用自己习惯的编辑器）
node.js，官网链接下载：http://nodejs.cn/；
使用chrome浏览器时遇到英文网站可以点击右键翻译
安装自己电脑的合适版本即可。
安装这些一般直接点击下一步即可，对于一些国外的软件注意安装目录中最好不要有中文路径，以免出现问题。

开发环境简单搭建：

1.创建一个webpackdome文件夹

首先我们创建一个webpackdome文件夹，然后把该文件夹拖入之我们的编辑器（vscode），然后在vscode右上角导航栏中依次点击：“终端”-“新终端”，我们可以看到底下出现终端。

2.下载安装webpack、webpack-cli、webpack-dev-server、html-webpack-plugin、style-loader、css-loader、postcss-loader(css转换插件)、autoprefixer(自动补全浏览器前缀)、file-loader插件

（1）先快速生成package文件，终端输入：npm init -y
（2）安装所需插件，终端输入：npm install webpack webpack-cli webpack-dev-server html-webpack-plugin postcss-loader autoprefixer style-loader css-loader file-loader -D

3.新建src文件夹

在src文件夹里面创建一个index.html文件和index.js文件，代码如下：

<!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>
  <h1>webpack dome</h1>
</body>
</html>

console.log('控制台输出webpack-dome') // index.js文件代码

4.新建名：webpack.config.js 的webpack默认配置文件

我们在webpackdome根目录中新建名为webpack.config.js的js文件，代码如下：

const path = require('path') // 引入path路径
const HtmlWebpackPlugin = require('html-webpack-plugin') // 引用解析html

module.exports = {
    // 默认导出
  mode: 'development', // 打包模式为development，开发环境，代码不会压缩
  entry: path.join(__dirname, 'src', 'index.js'), // 需要打包的代码路径，入口文件，webpack会从改入口文件不断延伸查找所需依赖
  output: {
    // 打包完成输出的配置
    filename: 'bundle.js', // 输出的文件名
    path: path.join(__dirname, 'dist') // 输出的文件夹
  },
  module: {
   
	rules:[
	  {
   
	    test: '/\.css$/', // 配置后缀为css的样式文件
	    use: ['style-loader', 'css-loader', 'postcss-loader'] // 注意执行顺序是从右到左，先执行postcss-loader进行兼容自动补全，然后css-loader解析css文件，最后style-loader将css样式添加到HTML的HEAD标签里，线上环境需要抽离css，下面有提到
	  },
	  {
   
	    test: '/\.less$/', // 如果使用less或sass也是一样，记得先安装对应插件
	    use

最低0.47元/天解锁文章

前端开发者赖毛

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端webpack5+打包工具基础入门css压缩babel配置ES6代码转ES5搭建简单的线上环境完整流程（一）

所需软件：vscode，官网链接下载：https://code.visualstudio.com/；（也可以用自己习惯的编辑器）node.js，官网链接下载：http://nodejs.cn/；使用chrome浏览器时遇到英文网站可以点击右键翻译安装自己电脑的合适版本即可。安装这些一般直接点击下一步即可，对于一些国外的软件注意安装目录中最好不要有中文路径，以免出现问题。1.创建一个webpackdome文件夹首先我们创建一个webpackdome文件夹，然后把该文件夹拖入之我们的编辑器（vsc
复制链接

扫一扫