webpack模块打包简易版

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

webpack基本使用流程(react)

1.安装webpack脚手架

cnpm install webpack webpack-cli -D

2.安装处理css的loader

cnpm install style-loader css-loader node-sass sass-loader postcss-loader -D

3.安装处理js的loader

cnpm install babel-loader @babel/core @babel/preset-env @babel/preset-react -D

tip:react 新增install@babel/preset-react

4.安装处理图片的loader

cnpm install file-loader url-loader -D

5.安装html-webpack-plugin clean-webpack-plugin

cnpm install html-webpack-plugin clean-webpack-plugin -D

6.自动添加浏览器前缀

cnpm install autoprefixer -D

7.安装开发环境中所需要的服务

cnpm install webpack-dev-server -D  //开发环境不需要打包,故使用webpack-dev-server启动服务,记得在json文件做配置

8.安装生产环境抽离css的插件

cnpm install extract-text-webpack-plugin@next -D  //不抽离css会导致css混入js中,导致代码的紊乱以及体积

tip:@next安装最新版本

启动文件

webpack打包的时候默认会找到目录下webpack.config.js文件,

合并文件

安装webpack配置项

cnpm install webpack-merge -D //开发或者生产模式的时候将使用它作为合并

.babelrc文件用于bebel处理之后的浏览器兼容的版本,一般配置兼容到浏览器最后2个版本

{

    "presets": [

        [

            "@babel/preset-env",

            {

                "targets":{

                    "browsers":["last 2 versions"]

                    //兼容到浏览器最后2个版本

                }

            }

        ]

    ]

}

postcss.config.js

autoprefixer为不同的浏览器自动添加css样式前缀

举例:由于项目配置了scss,我们用这个示范,可以看的浏览器的测试结果已经添加好了前缀

module.exports = {

    plugins:[

        require("autoprefixer")({

            overrideBrowserslist:[

                "defaults",

                "Android 4.1",

                "iOS 7.1",

                "Chrome>31",

                "ff>31",

                "ie>=8",

                "last 2 versions",

                ">0%"

            ]

        })

    ]

}

config文件用于webpack的配置项,一般为三个文件,base模式,开发模式,生产模式

此处展示为base文件,base为开发生产都需要用到的文件

const path = require('path')

//生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口

const HtmlWebapackPlugin = require('html-webpack-plugin')

//对于每一次生成的dist做更新

const {CleanWebpackPlugin} = require('clean-webpack-plugin')

//引入的插件请务必在plugin中做实例化

//入口文件出口文件

const PATH = {

    app:path.join(__dirname,"../src/main.js"),

    build:path.join(__dirname,"../dist")

}

module.exports = {

    entry:{

        app:PATH.app

    },

    output:{

        filename:process.env.NODE_ENV == "development"?"[name].[hash:8].js":"js/[name].js",

        path:PATH.build

    },

    //使用插件

    plugins:[

        new HtmlWebapackPlugin({

            filename:"index.html",

            template:"./public/index.html"

        }),

        new CleanWebpackPlugin()

    ],

    //别名配置

    resolve:{

        extensions:[".jsx",".js",".json"],

        alias:{

        }

    },

    //处理模块

    module:{

        rules:[

            //js文件处理

            {

                test:/\.(js|jsx)$/,

                loader:"babel-loader",

                exclude:path.join(__dirname,"../node_modules")

            },

            //图片处理

            {

                test:/\.(png|jpg|gif|svg)$/,

                use:{

                    loader:"url-loader",

                    options:{

                        limit:2048,

                        name:"image/[name].[ext]"

                    }

                }

            },

            //字体处理

            {

                test:/\.(woff|svg|woff2|eot|ttf)$/,

                use:{

                    loader:"url-loader",

                    options:{

                        name:"iconfont/[name].[ext]"

                    },

                },

                exclude:path.join(__dirname,"../node_modules")

            }

        ]

    }

}