21.webpack的基本使用

01.js

exports.info1 = function() {
    return "info1"
}

02.js

exports.info2 = function() {
    return "info2"
}

main.js

const m1 = require('./1.js')
const m2 = require('./2.js')
console.log(m1.info1() + '---' + m2.info2());

webpack配置文件webpack.config.js

const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
        path: path.resolve(__dirname, './dist'), //输出路径,__dirname:当前文件所在路径
        filename: 'bundle.js' //输出文件
    },
    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

如果要打包css文件,需要安装style-loader和css-loader,安装完成后在项目根目录中执行
webpack --mode=development完成打包

发布了253 篇原创文章 · 获赞 10 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/gunsmoke/article/details/105324678