首先初始化
?npm init?
安裝webpack
npm install webpack --save
安裝babel
npm install babel-core babel-preset-es2015 --save
npm install babel-loader --save
安裝less
npm install css-loader style-loader less less-loader --save
創(chuàng)建一個webpack.config.js配置文件
var path = require('path')
var outPath = path.resolve(__dirname, './bundle')
module.exports = {
? ? ? ? entry: './app.js',
? ? ? ? output: {
? ? ? ? ? ? ? ? path: outPath,
? ? ? ? ? ? ? ? filename: 'app.bundle.js',
? ? ? ? },
? ? ? ?module: {
? ? ? ? ? ? ? ? loaders: [{
? ? ? ? ? ? ? ? ? ? ? ? ? ? test: /\.js$/,
? ? ? ? ? ? ? ? ? ? ? ? ? ? exclude: /node_modules/,
? ? ? ? ? ? ? ? ? ? ? ? ? ? loader: 'babel-loader'
? ? ? ? ? ? ? ? },{
? ? ? ? ? ? ? ? ? ? ? ? ? ?test: /\.css$/,
? ? ? ? ? ? ? ? ? ? ? ? ? ?exclude: /node_modules/,
? ? ? ? ? ? ? ? ? ? ? ? ? ?loader: 'style-loader!css-loader'
? ? ? ? ? ? ? ? ?},{
? ? ? ? ? ? ? ? ? ? ? ? ? ? test: /\.less$/,
? ? ? ? ? ? ? ? ? ? ? ? ? ? exclude: /node_modules/,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?loader: 'style-loader!css-loader!less-loader'
? ? ? ? ? ? ? ? ?}]
? ? ? ? ? }
}
在根目錄下創(chuàng)建一個.babelrc文件
{ "presets": [ "es2015" ] }
在package.json中配置scriptsm,添加腳本
"start": "webpack --watch --progress --colors --display-chunks "
我的項(xiàng)目地址：github
