使用webpack创建项目和所需要的加载器

时间:2021-6-9 作者:qvyue

1.先创建一个项目目录,并初始化

创建项目,并打开项目所在目录的终端,输入命令:

npm init -y

2.安装webpack并设置自动打包

打开项目目录终端,输入命令:

npm install webpack webpack-cli -D

创建一个 webpack.config.js 的配置文件用来配置webpack
在 webpack.config.js 文件中编写代码进行webpack配置,如下:

module.exports = {
    mode:"development"
   //可以设置为development(开发模式),production(发布模式)
}

安装自动打包功能的包:webpack-dev-server

    npm install webpack-dev-server -D

修改package.json中的dev指令如下:

    "scripts":{
        "dev":"webpack-dev-server"
    }

3.设置默认预览页面和自动打开默认预览页面

默认预览页面实现方式:

安装默认预览功能的包:html-webpack-plugin
    npm install html-webpack-plugin -D
修改webpack.config.js文件,如下:
    //导入包
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    //创建对象
    const htmlPlugin = new HtmlWebpackPlugin({
        //设置生成预览页面的模板文件
        template:"./src/index.html",
        //设置生成的预览页面名称
        filename:"index.html"
    })
继续修改webpack.config.js文件,添加plugins信息:
    module.exports = {
        ......
        plugins:[ htmlPlugin ]
    }

默认打开服务器网页,实现方式就是打开package.json文件,修改dev命令:

"dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"

4.安装css,less,sass,postcss等加载器

A.安装style-loader,css-loader来处理样式文件
1).安装包
    npm install style-loader css-loader -D
2).配置规则:更改webpack.config.js的module中的rules数组
module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test设置需要匹配的文件类型,支持正则
                test:/.css$/,
                //use表示该文件类型需要调用的loader
                use:['style-loader','css-loader']
            }
        ]
    }
}
B.安装less,less-loader处理less文件
    1).安装包
        npm install less-loader less -D
    2).配置规则:更改webpack.config.js的module中的rules数组
    module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test设置需要匹配的文件类型,支持正则
                    test:/.css$/,
                //use表示该文件类型需要调用的loader
                    use:['style-loader','css-loader']
                },
                {
                    test:/.less$/,
                    use:['style-loader','css-loader','less-loader']
                }
            ]
        }
    }
C.安装sass-loader,node-sass处理less文件
 1).安装包
        npm install sass-loader node-sass -D
    2).配置规则:更改webpack.config.js的module中的rules数组
    module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test设置需要匹配的文件类型,支持正则
                    test:/.css$/,
                    //use表示该文件类型需要调用的loader
                    use:['style-loader','css-loader']
                },
                {
                    test:/.less$/,
                    use:['style-loader','css-loader','less-loader']
                },
                {
                    test:/.scss$/,
                    use:['style-loader','css-loader','sass-loader']
                }
            ]
        }
    }

补充:安装sass-loader失败时,大部分情况是因为网络原因,详情参考:
https://segmentfault.com/a/1190000010984731?utm_source=tag-newest

D.安装post-css自动添加css的兼容性前缀(-ie-,-webkit-)

1).安装包
npm install postcss-loader autoprefixer -D
2).在项目根目录创建并配置postcss.config.js文件
const autoprefixer = require(“autoprefixer”);
module.exports = {
plugins:[ autoprefixer ]
}
3).配置规则:更改webpack.config.js的module中的rules数组

module.exports = {

    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test设置需要匹配的文件类型,支持正则
                test:/.css$/,
                //use表示该文件类型需要调用的loader
                use:['style-loader','css-loader','postcss-loader']
            },
            {
                test:/.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/.scss$/,
                use:['style-loader','css-loader','sass-loader']
            }
        ]
    }
    

}

5.安装图片,字体文件加载器

1).安装包
    npm install url-loader file-loader -D
2).配置规则:更改webpack.config.js的module中的rules数组
module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test设置需要匹配的文件类型,支持正则
                test:/.css$/,
                //use表示该文件类型需要调用的loader
                use:['style-loader','css-loader']
            },
            {
                test:/.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/.scss$/,
                use:['style-loader','css-loader','sass-loader']
            },{
                test:/.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用来设置字节数,只有小于limit值的图片,才会转换
                //为base64图片
                use:"url-loader?limit=16940"
            }
        ]
    }
}

6.安装babel加载器

A.安装babel转换器
    npm install babel-loader @babel/core @babel/runtime -D
B.安装babel语法插件包
    npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
C.在项目根目录创建并配置babel.config.js文件
    
    module.exports = {
        presets:["@babel/preset-env"],
        plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
    }
D.配置规则:更改webpack.config.js的module中的rules数组
module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test设置需要匹配的文件类型,支持正则
                test:/.css$/,
                //use表示该文件类型需要调用的loader
                use:['style-loader','css-loader']
            },
            {
                test:/.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/.scss$/,
                use:['style-loader','css-loader','sass-loader']
            },{
                test:/.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用来设置字节数,只有小于limit值的图片,才会转换
                //为base64图片
                use:"url-loader?limit=16940"
            },{
                test:/.js$/,
                use:"babel-loader",
                //exclude为排除项,意思是不要处理node_modules中的js文件
                exclude:/node_modules/
            }
        ]
    }
}
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。