webpack教程
让我们先看一个常规的webpack配置文件 //一个常见的Webpack配置文件var webpack = require('webpack');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/build",
filename: "[name]-[hash].js"
},
module: {
loaders: [
{
test: /\.json$/,
loader: "json"
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'css?modules!postcss')
}
]
},
postcss: [
require('autoprefixer')
],
plugins: [
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html"
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin("[name]-[hash].css")
]
}
npm babel-cli -g 在项目根目录下新建babelrc文件
{ "presets":["es2015"], "plugins":[] }
npm install --save-dev babel-preset-es2015 -g
babel es6.js --out-file es5.js
babel src -d build
babel src -d build --watch
babel-node
npm install browser-sync -g服务器
browser-sync start --server browserify
npm install uglifyjs压缩js
uglifyjs
npm i -g node-smushit 压缩图片