记录学习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

1
2
3
4
5
6
7
module.exports = {
 entry:///////主模块路径
  output: ////打包之后的配置 {
        path：/////打包之后js文件的路径
         filename：打包之后js文件名
}
}

1
2
3
4
5
6
7
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

    1
    2
    3
    {
        "presets" : ["env"]   //以babel-preset-env作为转码规则
    }

  • step3：在module.exports中引入

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    module: {
        rules: [
            {
                test: /\.js$/,   ///以js文件后缀用babel-loader形式加载
                use: [
                    "babel-loader"
                ]
            }
        ]
    },