记 ——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在项目中的安装配置

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

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

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

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

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

webpack基础配置

webpack4.0各个击破（2）—— CSS篇

webpack4.0各个击破（4）—— Javascript & splitChunk