webpack.config.js 配置

Posted 2020-11-02 孤魂1715

const htmlWebpackPlugin = require(‘html-webpack-plugin‘);

module.exports = {

    // 入口文件配置

    // 值为：对象/字符串

    // entry: ‘./src/main.js‘,

    entry: {

        //key： 为输出时的文件名字

        // value： 为文件路径

        main: ‘./src/main.js‘

    },

    // 输出文件配置

    output: {

        path: __dirname+‘/dist‘,

        //[hash:20] 随机的数。保证名字不同，防止服务器的缓存

        // filename: ‘[name].[hash:20].js‘

        filename: ‘[name].js‘

    },

    //动态的加载script标签

 

    //处理模板

    cnpm install html-webpack-plugin -D

 

    plugins: [

        new HtmlWebpackPlugin({

            //作用的文件

            template: ‘./index.html‘,

            //输出的文件

            filename: ‘index.html‘

        })

    ],

    module: {

        //配置文件编译的规则

        rules: [

            //编译es6语法

 

            使用babel-loader

            cnpm install babel-loader babel-core -D

            只能解析基本的语法，方法，函数不能实现

            {

                test: /\.js$/,//需要编译的文件路径的匹配规则

                exclude: /node_modules/, //除去的文件路径

                loader: ‘babel-loader‘,

                //babel-loader的配置

                /*

                options: {

                    //预设

                    es6的函数和方法不能编译：  

                    （所用的es6在编译时，会提供方法转换， 适用于开发项目，框架）

                    cnpm install babel-plugin-transform-runtime -D

                    cnpm install babel-runtime -S

                    代码中用到了什么方法就会插入es5的方法

 

 

                    presets: [

                        // ‘env‘

                        //如果预设的单独一项配置，配置为数组

                        // 第一个值为预设名字

                        // 第二个值为这个预设的配置

                        [‘env‘, {

                            target: {

                                browsers: [‘>1%‘, ‘last 2 versions‘]

                            }

                        }]

                        //react用下面这个，别的用上面的

                        [‘env‘, "react"]

                    ],

                     plugins: [

                        "transform-runtime"

                    ]

                }

                */

            },

            解析vue成js           

            安装vue

            cnpm install vue vue-router vuex -S

            cnpm install vue-loader -D(安装完之后注检查依赖模块是否安装)

 

            {

                test: /\.vue$/,

                loader: ‘vue-loader‘

            },

 

            //编译css

            cnpm install css-loader style-loader -D

 

            {

                test: /\.css$/,

                loader: ‘style-loader!css-loader‘

            },

 

            //编译其他文件(png gif  jpeg jpg  ttf )

            url-loader

            cnpm install url-loader -D

 

            {

                test: /\.(png|jpeg|jpg|ttf|gif)/,

                loader: ‘url-loader‘

            }

 

        ]

    }

}