webpack踩过的坑

1.先执行npm init -y 初始化package.json，然后，执行npm install --save-dev webpack 往package.json里注入webpack作为开发环境依赖，否则GG

2.由于2.0升级，entry和path前要+__dirname，__dirname表示项目的根目录

module.exports={
    entry: __dirname+'/js/app/b.js',
    output: {
        path: __dirname+'/bin',
        filename: 'app.bundle.js'
    }
}

3.在webpack中引入jQuery需要把jquery放在全局中

import $ from 'jquery'
window.$ = $

4.webpack在打包css的时候，css中有pic，png，gif等文件时，在终端会报错

报错

解决方法
npm i url-loader --save-dev

webpack.config.js中

module: {
        loaders: [
            {
                test: /\.scss$/,
                exclude: /node-modules/,
                loader: 'style-loader!css-loader!sass-loader',
            },
            {
                test: /\.(png|jpg|jpeg|gif|woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader?limit=8192',
            }
        ]
    },

其中limit8192表示当图片大小小于8192时，图片采用base64编码
base64编码的优点：

1：减少了http请求；

2：数据就是图片；

缺点：

1：如果图片稍微有点大，这个字符串会很长很长；

5.webpack压缩js

压缩js必须是es5的否则会报错
首先安装
npm i uglifyjs-webpack-plugin --save-dev

webpack.config.js

    module: {
        loaders: [{
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'stage-0']
                }
            }
        ]
    },
    plugins: [
        new UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ]

6. webpack的 --config

scripts: {
    "webpack": "webpack --config=src/webpack.config.js"
}

目录层级：

目录

此时，运行 npm run webpack就可以在express-sticky-note文件夹下打包资源 而不用
跑到src文件夹下再执行webpack打包了

7. couldn't find preset 'env'

解决办法
npm i -D babel-preset-env

未完待续...