记录一次webpack2的项目架构

1、npm init -y 生成package.json项目描述文件。

2、npm install webpack –save-dev 下载webpack并将其安装到开发环境中。

3、npm install babel-loader babel-core –save-dev 下载安装babel转码工具并将其添加到开发环境中。

4、npm install css-loader style-loader –save-dev 下载安装两个css的装载器并将其安装到开发环境中。

5、npm install webpack-dev-server –save-dev 下载本地的服务器并将其安装到开发环境中。

6、npm install babel-preset-env –save-dev 下载安装babel的预设。

7、创建.babelrc文件将预设写入“preset”。

8、分别创建两个文件夹：src文件夹和build文件夹，前者用于放源代码，后者用于放打包后的的代码。

9、webpack.config.js的配置： const path = require(‘path’);

                                              module.exports = {
                entry : './src/js/calla.js',
                output : {
                path : path.resolve(__dirname,'dist'),
                 filename : 'mybundle.js'

},

module : {
rules : [

      {test : /\.js$/,exclude: /node_modules/,loader: 'babel-loader},

      {test : /\.css$/,
      use : [

           {loader : 'style-loader'},
           {loader: 'css-loader',
           options: {
                modules: true
      }
           }

]
}
]

}

}

未完待续。。。

Babel官方提供的一个名为babel-preset-env的插件。它不需要我们自己添加任何的preset，例如我们最常用的es2015,

它能根据设置智能的转换代码。

在webpack2中使用ExtractTextPlugin插件，需要注意，写法是酱紫的：
解释： use: 指的是需要什么样的loader去编译文件，这里由于源文件是.css所以选择是css-loader

fallback:指的是编译后用什么loader来提取css文件。这里用的是style-loader

另外：据说还有一个publicfile： 用来覆盖项目路径，生成该css文件的文件路径的，暂时还没研究出来怎么用。

Extracttextplugin这个插件抽离出来的css文件会自动的被用到html页面中去（自动创建link标签）。

html-webpack-plugin的用法也在项目中已经写明，不使用模板的话，会自动创建一个空的默认名字为index.html的页面，也可以配置自己写好的html模板页面。

经过验证，如果直接将css打包到js中加载页面的确会闪屏，然后用Extracttextplugin这个插件将css文件抽离出来后，果真就不闪屏了！！！厉害了！！！

一个细节：
require(‘normalize.css/normalize.css’);

和
import ‘styles/App.css’;

两种引入css文件的方式都可以成功打包，require是CommonJS的规范，import是ES6的规范，但是主流现在都不支持包括node和Chrome，

一般还是要用babel转换。

要知道 无论require还是import，都不是webpack的发明，它们是已经存在于世的不同的模块化规范(目前都不能直接运行于浏览器)。

关于require，最早应该见于nodejs开发，属于CommonJS规范的一部分。

关于import，是ES2015里的新模块化规范。