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 压缩图片

results matching ""

    No results matching ""