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
未完待续...
