webpack

作者: 蘑菇酱960903 | 来源:发表于2018-04-27 10:02 被阅读0次

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"
                ]
            }
        ]
    },

相关文章

网友评论

      本文标题:webpack

      本文链接:https://www.haomeiwen.com/subject/lamelftx.html