Webpack + babel

一、安装 webpack

npm i webpack -g

二、编辑 package.json

"keywords": [
    "webpack"
  ],
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.20.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.27.1",
    "file-loader": "^0.10.1",
    "jsx-loader": "^0.13.2",
    "style-loader": "^0.13.2",
    "url-loader": "^0.5.8",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  },

三、webpack.config.js

在项目根目录下创建 webpack.config.js

var moment  = require('moment');
var webpack = require('webpack');
//丑化代码的插件，即压缩代码。
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
/**var commonsPlugin = new webpack
                           .optimize
                           .CommonsChunkPlugin('common.js');*/
module.exports = {
   //插件项
   plugins: [
       // commonsPlugin

//自动生成文件的头部注释信息。
       new webpack.BannerPlugin('自动生成的文件头信息---' + moment().format('YYYY-MM-DD HH:mm:ss')),
       /**  丑化代码的插件*/
       new uglifyJsPlugin({
           compress: {
               warnings: false
           }
       })
   ],
   /**  页面入口文件配置,可以同时配置多个入口
   *    entry中的各个key就是生成的输出文件的名字
   * /    
entry: {
       entry01 : './entry.js',
       entry02 : './app.js'
   },
   //入口文件输出配置
   output: {
       // path: 'dist/js/page',
// 图片文件的输出路径，在css中写图片路径时，
//只需写图片原来所在位置即可，webpack会自动转换成输出路径
       publicPath  : './dist/js/page/',
       path        : __dirname + '/dist/js/page/',
       filename    : '[name].js'
       //[name]:是一个变量，会自动替换 entry中的key
   },
   module: {
       //加载器配置
       loaders: [
           { test: /\.css$/, loader: 'style-loader!css-loader' },
           { test: /\.js$/, loader: 'jsx-loader?harmony' },
           { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
//css样式中的图片加载器，url-loader 依赖于 file-loader
           { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'},
           //babel 转化 es6 -> es5
           {
               test: /\.js[x]?$/,
               exclude: /node_modules/,
               loader: 'babel-loader',
               query:{
                   presets:['react','es2015']
               }
           }
       ]
   },
   //其它解决方案配置
   resolve: {
       // root: '/usr/local/workspacelearning/wepack-learn/src', //绝对路径
       extensions: ['.js', '.json', '.scss'],
       alias: {
           AppStore : 'js/stores/AppStores.js',
           ActionType : 'js/actions/ActionType.js',
           AppAction : 'js/actions/AppAction.js'
       }
   }
};

四、创建文件

1、根目录下 分别创建 entry.js 和 app.js作为项目的入口文件，与webpack.config.js 中的entry配置项对应起来。

entry: {
        entry01 : './entry.js',
        entry02 : './app.js'
    },

entry.js:

// 载入 style.css，如果没有配置 webpack.config.js,
//则需要这样写：require("!style-loader!css-loader!./style.css");
require("./style.css"); 
document.write("这是 entry.js  本身的内容！他是一个入口文件\n\n");

document.write(require("./module.js"));

app.js:

document.write('这是app.js入口文件');
(() => alert('aaa'))();  //es6语法

2、根目录下 分别创建 index.html 和 app.html

html文件中 script的引用路径为 webpack打包以后的输出路径。

index.html




    
    Title

app.html




    
    Title

3、根目录下创建 css文件

style.css

body {
    background: url("./images/李若彤.jpg");
}

4、根目录下创建 imgaes 目录并放入图片

五、运行打包

$ webpack

会自动在项目根目录下生成 dist/js/page目录，并在里面生成：
entry01.js
entry02.js
aebcca736390ffcc32d4698bea99b999.jpg
并将 app.js 中的 es6代码编译成 es5.

entry 是webpack 打包的入口点，它会把入口文件中所有的引用文件全部进行打包。

五、发布服务器

安装服务器

$ npm install webpack-dev-server -g
$ webpack-dev-server --progress --colors

http://localhost:8080  = http://localhost:8080/index.html

http://localhost:8080/app.html

自动刷新+更改端口

//在package.json 的scripts标签中添加：
// 使用 inline方式自动刷新，当然也可以使用 iframe(webpack默认的)
"scripts":{
    "start":"webpack-dev-server --inline --host localhost --port 9093 --config webpack.config.js"
}

这样就可以访问 http://localhost:9093了