记 ——webpack4.0基础配置

才学完webpack4.0,webpack出5.0了,脑壳昏昏!!

1.安装node

2.新建一个文件夹,打开cmd,进入该文件夹使用npm来下载基本依赖配置

npm install init -y 

得到package.json文件,存放项目名称,各种依赖,插件等版本号

npm install webpack webpack-cli 

下载webpack以及脚手架

得到 node_modules 文件,依赖以及插件等都在这里面

手动创建以下文件

index.html:打包需要的模板

main.js:打包的入口

webpack.config.js:webpack核心配置文件

 1 //webpack.config.js文件
 2 let path = require(‘path‘)  //node自带的功能,不需要下载,
 3 module.exports = {
 4     entry:‘./src/main.js‘,
 5     output:{
 6         mode:‘development‘,
 7         path:path.resolve(__dirname,‘public‘),
 8         filename:‘js/[name][hash:6].js‘ //打包完成的文件在public/js里面
 9     }
10 }

entry: 入口文件

output: 出口文件配置

mode:  设置模式,development:开发模式,production:生产模式

path:  打包后文件存放的路径,__dirname为当前文件夹,创建一个public文件来保存打包的文件

filename:  打包后的文件名称,打包在js文件里面

[name]:当前文件名称

[hash:6]:  设置一个哈希值,哈希值的长度为6,哈希值可以防止文件名冲突

接下来我们可以使用npx webpack来打包,这时你会看到一个public文件,打包的内容都在里面,不过只能看到js文件,因为html文件还没配置

npm install html-webpack-plugin -D  //下载html-webpack-plugin插件来处理html文件

 1 let HtmlWebpackPlugin = require(‘html-webpack-plugin‘)
 2
 3 module.exports =  {
 4 plugins:[
 5         new  HtmlWebpackPlugin({
 6             template:‘index.html‘,//使用的模板
 7             filename:‘index.html‘,//打包出来的文件名称
 8             minify:{//优化操作
 9                 removeAttributeQuotes:true, //去掉双引号
10                 collapseWhitespace:true //去掉空格
11             },
12         })
13     ]
14 }

plugins:插件集,webpack的插件都放在里面,通过new来使用

css处理:

npm install css-loader style-loader less-loader -D

module.exports = {
  module:{
        rules:[
            {
                test:/\.css$/,  //正则表达式来匹配所有.css文件
                use:[‘style-loader‘,‘css-loader‘]
            },{
                test:/\.less$/,  //匹配所有.less文件
                use:[‘style-loader‘,‘css-loader‘,‘less-loader‘]
            }
        ]
    }
}

module:模块,里面存放的都是loader的配置

loader:能将所有类型的文件转化为webpack能够处理的模块,webpack只能处理js的模块,loader默认是从右致左,从下致上执行的

rules:匹配规则

test:正则表达式进行匹配相应的文件

use:设置转化是具体使用的loader

style-loader:将模块的导出作为样式,使用style标签导入到DOM中

css-loader:解析css文件,使用import进行加载,并且返回css样式

less-loader:将less文件转化为webpack可识别的css

第二种css配置方法以及添加css前缀

npm install mini-css-extract-plugin  将所有的css提取到单独的文件中,为每个包含css的js文件创建一个css文件

npm install postcss-loader autoprefixer  给css添加兼容的前缀

//webpack.config.js文件
let MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘)

module.exports = {
module:{
        rules:[
            {
                test:/\.css$/,  //正则表达式来匹配所有.css文件
                use:[
                    MiniCssExtractPlugin.loader,
                    ‘css-loader‘,
                    ‘postcss-loader‘
                ]
            },{
                test:/\.less$/,  //匹配所有.less文件
                use:[
                    MiniCssExtractPlugin.loader,
                    ‘css-loader‘,
                    ‘postcss-loader‘,
                    ‘less-loader‘
                ]
            }
        ]
    },
    plugins:[
        new  MiniCssExtractPlugin({
            filename:‘./css/main[hash].css‘
        })
    ]
}//filename:css文件打包的目录以及文件名称//需要的文件都在main.js文件中使用require去引用//也可以import引入css//index.jsrequier(‘./css/***.css‘)require(‘./css/***.less‘)
//在与webpack.config.js文件平级的目录中创建一个postcss.config.js文件用来引入autoprefixer,webpack自动会引用这个文件,我们不需要去引用
module.exports = {
    plugins:[require(‘autoprefixer‘)]
}

解决图片引用问题:

npm install url-loader file-loader  url-loader依赖于file-loader,所以我们需要安装file-loader

url-loader  解决图片引入的路径问题以及可以将指定大小范围内的图片解析成base64码

file-loader  将文件发送到输出文件夹,并返回(相对)URL

//在module -> rules里面添加
module.exports = {
  module:{
    rules:[
       {
          test:/\.(png|gif|jpg)/,
          use:{
             loader:‘url-loader‘,
             options:{
             limit:8919,
             name:‘img/[name][hash:6].[ext]‘
             }
          }
       }
    ]
  },
plugins:[
        new  MiniCssExtractPlugin({
            filename:‘./css/main[hash].css‘
        })
    ]
}

//在webpack.config.js同级的目录下创建一个postcss.config.js文件用来引入autoprefixer,webpack自动会引用这个文件,我们不需要去引用
module.exports = {
    plugins:[require(‘autoprefixer‘)]
}

options:配置属性

limit:文件小于于8.919kb就转为base64码

name:图片存放的位置以及名称

[ext]:根据文件自动添加后缀

高阶js转低阶:

安装需要的loader以及依赖等

npm install  babel-loader @bable/core @babel/preset-env -D 

安装支持ES6的class依赖

@babel/plugin-proposal-class-properties 

支持es6修饰器

@babel/plugin-proposal-decorators

@babel/plugin-transform-runtime 

高级语法转低级必须使用的包,由于上线时需要,所有不用加-D

@babel/runtime 

实例上的方法默认不会去解析,需要引用在代码里,不能加-D

@babel/polyfill

module.exports = {
  plugins:{
       rules:[
              {
                test:/\.js$/,//匹配所有js文件
                use:{
                    loader:‘babel-loader‘,  //语法转化的loader
                    options:{   //转化的配置
                        presets:[‘@babel/preset-env‘],  //设置预设
                        plugins:[
                            ["@babel/plugin-proposal-decorators", { "legacy": true }],
                            ["@babel/plugin-proposal-class-properties", { "loose" : true }],
                            "@babel/plugin-transform-runtime"
                        ]
                    }
                },
                include:path.resolve(__dirname,‘src‘),//转化当前文件夹下的src目录
                exclude:/node_modules/  //排除不需要转化的目录
            }
       ]
    }
}

dveServer配置服务器配置

npm install webpack-dev-server

//在webpack.config.js文件中添加
module.exports = {
  devServer:{
        port:3000,//端口
        progress:true, //  显示压缩进度条
        contentBase:"./public",//启动的路径
        compress:true,//启动zip压缩
        open: true,    运行时自动打开浏览器
        hot:true,//启用热更新
        inline:true,//页面实时刷新
    }
}

/*在package.json中的scripts属性中添加两项

"build":"webpack --config webpack.config.js",   //使用我们的配置文件进行打包
"dev": "webpack-dev-server"    //运行项目

如果想运行项目,就在终端中启用
npm run build    打包
npm run dev    运行项目
*/

调用打包后,将旧文件删除

npm install clean-webpack-plugin -D

let {CleanWebpackPlugin} = require(‘clean-webpack-plugin‘)////删除多次打包生成不必要的旧文件

plugin:[
   new CleanWebpackPlugin()       //默认删除output.path里面的文件
]

 //   watch:true, //监听代码改变,实时打包webpack-dev-server默认开启监听
    watchOptions:{
        poll:1000,  //设置多久检查一次,单位为毫秒
        aggregateTimeout:500,   //防抖,代码改变500毫秒之后再自动打包
        ignored:/node_modules/  //忽略不需要监听的文件
    },

附上我的基本配置全部代码:

let path = require(‘path‘)//node自带的
let HtmlWebpackPlugin = require(‘html-webpack-plugin‘)
let MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘)
let {CleanWebpackPlugin} = require(‘clean-webpack-plugin‘)
module.exports = {
    entry:‘./src/main.js‘,//入口文件
    mode:‘development‘,   //设置模式,一共有两种development:开发模式,production:生产模式
    output:{//打包的出口配置
        path:path.resolve(__dirname,‘public‘),  //__dirname表示为当前路径,在当前路径下创建一个public文件夹
        //打包后的文件名称
        filename:‘js/[name][hash:6].js‘
    },
    devServer:{
        port:3000,
        progress:true, //  显示压缩进度条
        contentBase:"./public",//启动的路径
        compress:true,//启动zip压缩
        open: true,
        hot:true,//启用热更新
        inline:true,//页面实时刷新
    },
    module:{
        rules:[
            {
                test:/\.css$/,  //正则表达式来匹配所有.css文件
                use:[
                    MiniCssExtractPlugin.loader,
                    ‘css-loader‘,
                    ‘postcss-loader‘
                ]
            },{
                test:/\.less$/,  //匹配所有.less文件
                use:[
                    MiniCssExtractPlugin.loader,
                    ‘css-loader‘,
                    ‘postcss-loader‘,
                    ‘less-loader‘
                ]
            },
            //在module -> rules里面添加
            {
                test:/\.(jpg|png|gif)/,
                use:{
                    loader:‘url-loader‘,
                    options:{
                        limit:8919,
                        name:‘img/[name][hash:6].[ext]‘
                    }
                }
            },{
                test:/\.js$/,//匹配所有js文件
                use:{
                    loader:‘babel-loader‘,  //语法转化的loader
                    options:{   //转化的配置
                        presets:[‘@babel/preset-env‘],  //设置预设
                        plugins:[
                            ["@babel/plugin-proposal-decorators", { "legacy": true }],
                            ["@babel/plugin-proposal-class-properties", { "loose" : true }],
                            "@babel/plugin-transform-runtime"
                        ]
                    }
                },
                include:path.resolve(__dirname,‘src‘),//转化当前文件夹下的src目录
                exclude:/node_modules/  //排除不需要转化的目录

            }
        ]
    },
   // watch:true    监听代码跟新,实时打包,webpack-dev-server默认是开启的,所以我们不需要使用
   watchOptions:{
       ploo:1000,   //设置多久检查一次,单位为毫秒
       aggregateTimeout:500,    //防抖,代码改变,500毫秒之后再自动打包
       ignored:/node_modules/  //忽略不需要监听的文件
   },
    plugins:[//插件集,webpack的插件都放在里面,通过new来使用

        new  HtmlWebpackPlugin({
            template:‘index.html‘,//使用的模板
            filename:‘index.html‘,//打包出来的文件名称
            minify:{//优化操作
                removeAttributeQuotes:true, //去掉双引号
                collapseWhitespace:true //去掉空格
            },
        }),
        new  MiniCssExtractPlugin({
            filename:‘./css/main[hash].css‘
        }),
         new  CleanWebpackPlugin()
    ]
}

基本配置已经完结!

html中引入图片的问题我并没有解决!!

如果有错误请指出,谢谢!

原文地址:https://www.cnblogs.com/wangyao521/p/12098394.html

时间: 2024-10-06 23:20:54

记 ——webpack4.0基础配置的相关文章

webpack4.0在项目中的安装配置

webpack4.0在项目中的安装配置 最近在学vue,刚好学到了webpack,因为看的教程比较老,他们用的都是webpck4.0以下的版本,我一步一步跟着教程的步骤来,发现教程里一点问题都没有,到我自己做的时候就遇到了几个坑,趁着还记得比较清楚,把它记下来. 安装webpack 全局安装webpack: 命令行执行: npm i webpack -g 局部安装(项目中安装): 我用的是VSCode,在VSCode的 powershell 终端中直接运行 cnpm i webpack -D 项

《1》CentOS7.0+OpenStack+kvm云平台部署—基础配置

一.主机分配: 主机名        IP(Static)       系统配置                                      角色 openstack      192.168.1.2    CentOS-7.0-x86_64-desktop     4CPU,16G RAM,300G DISK,2网卡       管理节点/计算节点 node          192.168.1.3    CentOS-7.0-x86_64-desktop    4CPU,16G

webpack4.0.1安装问题和webpack.config.js的配置变化

The CLI moved into a separate package: webpack-cli. Please install 'webpack-cli' in addition to webpack itself to use the CLI. -> When using npm: npm install webpack-cli -D -> When using yarn: yarn add webpack-cli -D webpack4.0.1安装问题,提示: The CLI mov

webpack4.0在Mac下的安装配置及踩到的坑

一.什么是webpack是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用.可以将多种静态资源 js.css.less 转换成一个静态文件,减少了页面的请求. ? webpack4.0 安装与环境配置在安装webpack4.0之前,需要安装node,nod

[转]webpack4.0.1安装问题和webpack.config.js的配置变化

本文转自:https://blog.csdn.net/jiang7701037/article/details/79403637 The CLI moved into a separate package: webpack-cli. Please install 'webpack-cli' in addition to webpack itself to use the CLI. -> When using npm: npm install webpack-cli -D -> When usi

从基础到实战 手把手带你掌握新版Webpack4.0

原文配套视频资源获取链接:点击获取 原文配套源码资源获取链接:点击获取 第1章 课程导学(打消你的学习疑虑) 掌握Webpack越来越成为前端工程师的标配技能,本章会对课程整体进行介绍,打消你的学习疑虑. 1-1 课程导学试看 第2章 Webpack 初探 本章通过清晰易懂的例子,带你了解 Webpack 的产生背景,以及其能够解决的问题.在此基础上,完成开发环境的搭建,Webpack 的安装,并进行最基础的 Webpack 使用讲解. 2-1 webpack 究竟是什么? 2-2 什么是模块打

webpack基础配置

现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包.为了简化开发的复杂度,前端社区涌现出了很多好的实践方法 模块化,让我们可以把复杂的程序细化为小的文件; 类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能转换为JavaScript文件使浏览器可以识别: Scss,less等CSS预处理器 ... 这些改进确实大大的提高了我们的开发效率,但是利用它们

webpack4.0各个击破(2)—— CSS篇

webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习webpack工具中相应的处理办法.(本篇中的参数配置及使用方式均基于webpack4.0版本) 一. CSS文件基本处理需求 假设项目中的CSS文件均采用预编译语言编写,那么在打包中需要处理的基本问题包括: 预编译语言转换 样式文件挂载方式选择 代码优化(合并及压缩) 去除或保留指定格式的注释 资源定

webpack4.0各个击破(4)—— Javascript & splitChunk

目录 一. Js模块化开发 二. Js文件的一般打包需求 三. 使用webpack处理js文件 3.1 使用babel转换ES6+语法 3.2 脚本合并 3.3 公共模块识别 3.4 代码分割 3.5 代码混淆压缩 四. 细说splitChunks技术 4.1 参数说明 4.2 参数配置 4.3 代码分割实例 五. 参考及附件说明 webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建