webpack

step1:
进入项目根目录
npm init 创建 package.json
npm install --save-dev webpack
step2:
创建app文件夹:用来存放依赖模块js和主模块js
在app中创建Greeter.js main.js
创建public文件夹:用来存放webpack打包之后用于浏览器引用的文件夹
在public中创建index.html, 并且引入bundle.js (bundle.js也就是最终打包后的一个集合js的文件)
step3:
正式使用webpack
module.exports = {
entry:///////主模块路径
output: ////打包之后的配置 {
path://///打包之后js文件的路径
filename:打包之后js文件名
}
}

module.exports = {
    entry: __dirname + '/app/main.js',   ///__dirname 是当前脚本所在的目录
    output: {
        path: __dirname + '/public',
        filename: 'bundle.js'
    }
}

step1:引入babel
npm i babel-loader -D ///在规则中引入loader
npm i babel-core -D ///babel-loader会引用babel-core的某些api
npm i babel-preset-env -D //转码规则
step2:创建.babelrc
{
"presets" : ["env"] //以babel-preset-env作为转码规则
}
step3:在module.exports中引入

    module: {
        rules: [
            {
                test: /\.js$/,   ///以js文件后缀用babel-loader形式加载
                use: [
                    "babel-loader"
                ]
            }
        ]
    },
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 学习流程 参考文档:入门Webpack,看这篇就够了Webpack for React 一. 简单使用webpac...
    Jason_Zeng阅读 3,302评论 2赞 16
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,431评论 7赞 35
  • 前言 WebPack 是什么? WebPack 是什么,WebPack 可以看做是模块打包机:它做的事情是,分析你...
    Promise__阅读 1,254评论 3赞 12
  • 考完了意大利语文化,我都傻了。
    一个神经质的疯子阅读 153评论 0赞 0
  • 原料: 排骨300克,姜少许,大米50克,食盐适量,香菜50克 一、排骨洗净用开水炸一下,捞出备用 2、姜洗净去皮...
    蕴含精华阅读 301评论 0赞 0

友情链接更多精彩内容