webpack基本使用

打包工具，压缩，兼容，代码规范，语法转换。

安装

npm i webpack webpack-cli -g

我个人喜欢安装再全局，可以直接在终端用webpack命令打包

webpack -v   //查看版本，确定是否安装完成

然后创建src文件夹，在src内创建index.js文件，执行下行命令就会自动打包

webpack --mode development //打包成开发环境

生成dist文件，执行里面的main.js文件，就会和src内文件执行的结果一样

配置

之前都是默认的情况，其实整个过程都是可以配置的，比如打包开始的文件，生成的文件，其他一些东西。

先创建一个webpack.config.js文件

JavaScript打包配置

从哪里打包的我们叫入口文件，打包生成的叫出口文件

const {resolve} = require('path')//导入path模块的resolve方法

module.exports = {
    mode:'production', //生产的模式，现在是配置的是运行环境

    entry:'./all/index.js',  //入口文件，单入口

    // entry:['./all/index.js','./all/add.js'],  //入口文件,多入口文件
    
    // entry:{
    //     one:'./all/index.js',
    //     two:'./all/add.js'
    // },  //入口文件，多入口对象写法

    // entry:{
    //     one:['./all/index.js','./all/add.js']
    // },  //入口文件，多入口对象加数组写法，会将两个文件合成一个文件输出

    output:{
        filename:'last.js',   //出口文件叫last.js，单出口
        path:resolve(__dirname,'web')  //生成的路径在web下
    }

    // output:{
    //     filename:'[name].js',   //出口文件名和上面对象多入口的属性名一样，多出口
    //     path:resolve(__dirname,'web')  //生成的路径在web下
    // }
};

   

html打包配置

导入html-webpack-plugin

npm i html-webpack-plugin -D

const {resolve} = require('path')
const htmlWebpackPlugin=require('html-webpack-plugin')//导入html-webpack-plugin

module.exports = {
    mode:'development',

    entry:'./all/index.js',

    output:{
        filename:'last.js', 
        path:resolve(__dirname,'web') 
    },

    plugins:[//插件
        // new htmlWebpackPlugin()//默认自己创建一个html，引入js

        new htmlWebpackPlugin({
            template:'./all/index.html', //引用自己写好的html
            filename:'last.html', //生成的html的文件名
            minify:{
                // collapseWhitespace:true,//移除空格
                removeComments:true//移除注释
            },
            //chunks:['one','two']//引入的js，用对象方式引入时的属性名，，引入顺序从后往前
        })
    ]
};

css打包配置

下需要的包

npm i css-loader style-laoder -D

创建css文件，在入口文件导入

require('./XXXX.css')

配置文件

const {resolve} = require('path')
const htmlWebpackPlugin=require('html-webpack-plugin')

module.exports = {
    mode:'development',

    entry:'./all/index.js',

    output:{
        filename:'last.js', 
        path:resolve(__dirname,'web') 
    },

    module:{
        rules:[
            {
                test:/\.css$/,//配置以.css结尾的文件
                use:['style-loader','css-loader']//配置style-loader(出来css中的外部资源),css-loader（将css插入html中）,配置顺序从上到下，从右到左
            }
        ]
    },

    plugins:[
        new htmlWebpackPlugin({
            template:'./all/index.html',
            filename:'last.html',
            minify:{
                removeComments:true
            }
        })
    ],


};

配置less或者sass

下载需要的包

less

npm i less less-loader -D

sass

npm i node-sass sass-loader -D

和css一样入口文件导入

配置文件

const {resolve} = require('path')
const htmlWebpackPlugin=require('html-webpack-plugin')

module.exports = {
    mode:'development',

    entry:'./all/index.js',

    output:{
        filename:'last.js', 
        path:resolve(__dirname,'web') 
    },

    module:{
        rules:[
            { test:/\.css$/,use:['style-loader','css-loader'] },
            { test:/\.less$/,use:['style-loader','css-loader','less-loader'] },//和css差不多，就是先将less转成css
            { test:/\.scss$/,use:['style-loader','css-loader','sass-loader'] }//和css差不多，就是先将scss转成css
        ]
    },

    plugins:[
        new htmlWebpackPlugin({
            template:'./all/index.html',
            filename:'last.html',
            minify:{
                removeComments:true
            }
        })
    ],

};

上面的方法会将css以内嵌的方式导入，现在将css文件提取单独文件，变成外部样式

安装需要的包

cnpm i mini-css-extract-plugin -D

配置文件

const {resolve} = require('path')
const htmlWebpackPlugin=require('html-webpack-plugin')
const miniCssExtractPlugin=require('mini-css-extract-plugin')//导入mini-css-extract-plugin

module.exports = {
    mode:'development',

    entry:'./all/index.js',

    output:{
        filename:'last.js', 
        path:resolve(__dirname,'web') 
    },

    module:{
        rules:[
            { test:/\.css$/,use:[miniCssExtractPlugin.loader,'css-loader'] },//将style-loader换成miniCssExtractPlugin.loader
            { test:/\.less$/,use:[miniCssExtractPlugin.loader,'css-loader','less-loader'] },
            { test:/\.scss$/,use:[miniCssExtractPlugin.loader,'css-loader','sass-loader'] }
        ]
    },

    plugins:[
        new htmlWebpackPlugin({
            template:'./all/index.html',
            filename:'last.html',
            minify:{
                removeComments:true
            }
        }),
        new miniCssExtractPlugin({//创建miniCssExtractPlugin对象
            filename:'./last.css'//生成的css文件名
        })
    ],
};

css兼容配置

下载需要的包

cnpm i postscc-loader postcss-preset-env -D

配置

const {resolve} = require('path')
const htmlWebpackPlugin=require('html-webpack-plugin')
const miniCssExtractPlugin=require('mini-css-extract-plugin')

module.exports = {
    mode:'development',

    entry:'./all/index.js',

    output:{
        filename:'last.js', 
        path:resolve(__dirname,'web') 
    },

    module:{
        rules:[
            { test:/\.css$/,use:[miniCssExtractPlugin.loader,'css-loader','postcss-loader'] },//加入postcss-loader先兼容处理
            { test:/\.less$/,use:[miniCssExtractPlugin.loader,'css-loader','less-loader','postcss-loader'] },
            { test:/\.scss$/,use:[miniCssExtractPlugin.loader,'css-loader','sass-loader','postcss-loader'] }
        ]
    },

    plugins:[
        new htmlWebpackPlugin({
            template:'./all/index.html',
            filename:'last.html',
            minify:{
                removeComments:true
            }
        }),
        new miniCssExtractPlugin({
            filename:'./last.css'
        })
    ],
};

创建poastcss.config.js文件

module.exports={
    plugin:[
        require('postcss-preset-env')()//导入postcss-preset-env插件
    ]
}

在package.json内处理兼容的浏览器

 "browserslist":[
    "> 0.2%",                          //八成以上的浏览器
    "last 2 versions",                 //最后两个版本
    "not dead"                         //除去消失的浏览器
  ]

css压缩

安装需要的包

cnpm i optimize-css-assets-webpack-plugin -D

const {resolve} = require('path')
const htmlWebpackPlugin=require('html-webpack-plugin')
const miniCssExtractPlugin=require('mini-css-extract-plugin')
const optimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin')//导入

module.exports = {
    mode:'development',

    entry:'./all/index.js',

    output:{
        filename:'last.js', 
        path:resolve(__dirname,'web') 
    },

    module:{
        rules:[
            { test:/\.css$/,use:[miniCssExtractPlugin.loader,'css-loader','postcss-loader'] },
            { test:/\.less$/,use:[miniCssExtractPlugin.loader,'css-loader','less-loader','postcss-loader'] },
            { test:/\.scss$/,use:[miniCssExtractPlugin.loader,'css-loader','sass-loader','postcss-loader'] }
        ]
    },

    plugins:[
        new htmlWebpackPlugin({
            template:'./all/index.html',
            filename:'last.html',
            minify:{
                removeComments:true
            }
        }),
        new miniCssExtractPlugin({
            filename:'./last.css'
        }),
        new optimizeCssAssetsWebpackPlugin()//创建对象
    ],
};

配置图片

下载需要的包

cnpm i url-loader file-loader -D

cnpm i html-loader -D

配置

const {resolve} = require('path')
const htmlWebpackPlugin=require('html-webpack-plugin')
const miniCssExtractPlugin=require('mini-css-extract-plugin')
const optimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin')//导入

module.exports = {
    mode:'development',

    entry:'./all/index.js',

    output:{
        filename:'last.js', 
        path:resolve(__dirname,'web') 
    },

    module:{
        rules:[
            { test:/\.css$/,use:[miniCssExtractPlugin.loader,'css-loader','postcss-loader'] },
            { test:/\.less$/,use:[miniCssExtractPlugin.loader,'css-loader','less-loader','postcss-loader'] },
            { test:/\.scss$/,use:[miniCssExtractPlugin.loader,'css-loader','sass-loader','postcss-loader'] },
            {
                test:/\.(png|jpg|jpeg|gif)$/,
                loader:'url-loader',
                option:{
                    publicPath:'./img/',//引入的公共路径
                    outputPath:'img/',//打包的文件
                    limit:1024 * 8,//8kb一下的用base64
                    name:'[name][hash:10].[ext]'//图片名字为名字加上hash的前十位.文件名
                }
            },
            {
                test:/\.html$/,
                loader:'html-loader'//专门处理html内导入的图片
            }
        ]
    },

    plugins:[
        new htmlWebpackPlugin({
            template:'./all/index.html',
            filename:'last.html',
            minify:{
                removeComments:true
            }
        }),
        new miniCssExtractPlugin({
            filename:'./last.css'
        }),
        new optimizeCssAssetsWebpackPlugin()//创建对象
    ],
};

配置其他文件

const {resolve} = require('path')
const htmlWebpackPlugin=require('html-webpack-plugin')
const miniCssExtractPlugin=require('mini-css-extract-plugin')
const optimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin')//导入

module.exports = {
    mode:'development',

    entry:'./all/index.js',

    output:{
        filename:'last.js', 
        path:resolve(__dirname,'web') 
    },

    module:{
        rules:[
            { test:/\.css$/,use:[miniCssExtractPlugin.loader,'css-loader','postcss-loader'] },
            { test:/\.less$/,use:[miniCssExtractPlugin.loader,'css-loader','less-loader','postcss-loader'] },
            { test:/\.scss$/,use:[miniCssExtractPlugin.loader,'css-loader','sass-loader','postcss-loader'] },
            {
                test:/\.(png|jpg|jpeg|gif)$/,
                loader:'url-loader',
                option:{
                    publicPath:'./img',
                    outputPath:'img/',
                    limit:1024 * 8,
                    name:'[name][hash:10].[ext]'
                }
            },
            {
                test:/\.html$/,
                loader:'html-loader'
            },
            {
                exclude:/\.(js|json|html|css|less|scss|png|gif|jpg|jpeg)$/,//排除这些文件
                loader:'file-loader',
                options:{
                    publicPath:'./font',
                    outputPath:'font/',
                    name:'[name][hash:10].[ext]'
                }
            }
        ]
    },

    plugins:[
        new htmlWebpackPlugin({
            template:'./all/index.html',
            filename:'last.html',
            minify:{
                removeComments:true
            }
        }),
        new miniCssExtractPlugin({
            filename:'./last.css'
        }),
        new optimizeCssAssetsWebpackPlugin()//创建对象
    ],
};

配置服务器

下载需要的包

npm i webpack-dev-server -g

然后在终端webpack serve 运行

配置

const {resolve} = require('path')
const htmlWebpackPlugin=require('html-webpack-plugin')
const miniCssExtractPlugin=require('mini-css-extract-plugin')
const optimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin')//导入

module.exports = {
    mode:'development',

    entry:'./all/index.js',

    output:{
        filename:'last.js', 
        path:resolve(__dirname,'web') 
    },

    module:{
        rules:[
            { test:/\.css$/,use:[miniCssExtractPlugin.loader,'css-loader','postcss-loader'] },
            { test:/\.less$/,use:[miniCssExtractPlugin.loader,'css-loader','less-loader','postcss-loader'] },
            { test:/\.scss$/,use:[miniCssExtractPlugin.loader,'css-loader','sass-loader','postcss-loader'] },
            {
                test:/\.(png|jpg|jpeg|gif)$/,
                loader:'url-loader',
                options:{
                    publicPath:'./img',
                    outputPath:'img/',
                    limit:1024 * 8,
                    name:'[name][hash:10].[ext]'
                }
            },
            {
                test:/\.html$/,
                loader:'html-loader'
            },
            {
                exclude:/\.(js|json|html|css|less|scss|png|gif|jpg|jpeg)$/,
                loader:'file-loader',
                options:{
                    publicPath:'./font',
                    outputPath:'font/',
                    name:'[name][hash:10].[ext]'
                }
            }
        ]
    },

    plugins:[
        new htmlWebpackPlugin({
            template:'./all/index.html',
            filename:'last.html',
            minify:{
                removeComments:true
            }
        }),
        new miniCssExtractPlugin({
            filename:'./last.css'
        }),
        new optimizeCssAssetsWebpackPlugin()//创建对象
    ],

    target:'web',//立即更新
    devServer:{
        contentBase:resolve(__dirname,'web'),//开启的页面
        port:3000,//开启端口
        open:true,//自动打开页面
        compress:true//利用gzip压缩
    }
};

JavaScript语法检查

下需要的包

cnpm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D

配置文件

const {resolve} = require('path')
const htmlWebpackPlugin=require('html-webpack-plugin')
const miniCssExtractPlugin=require('mini-css-extract-plugin')
const optimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin')//导入

module.exports = {
    mode:'development',

    entry:'./all/index.js',

    output:{
        filename:'last.js', 
        path:resolve(__dirname,'web') 
    },

    module:{
        rules:[
            { test:/\.css$/,use:[miniCssExtractPlugin.loader,'css-loader','postcss-loader'] },
            { test:/\.less$/,use:[miniCssExtractPlugin.loader,'css-loader','less-loader','postcss-loader'] },
            { test:/\.scss$/,use:[miniCssExtractPlugin.loader,'css-loader','sass-loader','postcss-loader'] },
            {
                test:/\.(png|jpg|jpeg|gif)$/,
                loader:'url-loader',
                options:{
                    publicPath:'./img',
                    outputPath:'img/',
                    limit:1024 * 8,
                    name:'[name][hash:10].[ext]'
                }
            },
            {
                test:/\.html$/,
                loader:'html-loader'
            },
            {
                exclude:/\.(js|json|html|css|less|scss|png|gif|jpg|jpeg)$/,
                loader:'file-loader',
                options:{
                    publicPath:'./font',
                    outputPath:'font/',
                    name:'[name][hash:10].[ext]'
                }
            },
             {
               test:/\.js$/,
               exclude:/node-modules/,
               loader:'eslint-loader',
               options:{
                   fix:true//自动修改错误
               }
           }
        ]
    },

    plugins:[
        new htmlWebpackPlugin({
            template:'./all/index.html',
            filename:'last.html',
            minify:{
                removeComments:true
            }
        }),
        new miniCssExtractPlugin({
            filename:'./last.css'
        }),
        new optimizeCssAssetsWebpackPlugin()
    ],

    target:'web',
    devServer:{
        contentBase:resolve(__dirname,'web'),
        port:3000,
        open:true,
        compress:true
    }
};

package.json配置

  "eslintConfig": {
    "extends": "airbnb-base"
  }