2、webpack的loader

一：loader可以把css当成模块打包到dist/bundle.js里

ps: package.json改了代码后要“npm install”

0、由于webpack打包是通过main.js文件作为入口，mian.js依赖的东西进行层层打包，所以在main.js里输入require('./css/normal.css')，表示main.js依赖normal.css文件

1、在终端的当期项目的路径中输入“npm install css-loader@2.0.2 --save-dev”
2、在webpack.config.js的module.exports里输入下面代码
module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
//test: /\.css$/  这一行是匹配所有以css结尾的文件，拿到这些文件应用下面这一行use: [ 'style-loader', 'css-loader' ]这两个loader
//webpack读取多个loader “use: [ 'style-loader', 'css-loader' ]” 是从右向左读的。
//css-loader只负责加载，不负责解析，要想css在浏览器生效，要导入style-loader，（style-loader将模块导出作为样式添加到DOM里）
终端输入 npm install style-loader@0.23.1 --save-dev

如果要解析less的样式：
less-loader
npm install --save-dev less-loader@4.1.0 less@3.9.0

二：webpack图片文件的处理
url-loader
npm install --save-dev url-loader@1.1.2

在webpack.config.js中写如下代码：
{
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
            //当加载的图片小于limit的值时，会将图片编译成base64字符串形式
              limit: 13000,
              //防止图片打包后的名字同名，所以自定义生成dist文件夹中的img文件夹和哈希值防止重复，【】里的是变量，ext是扩展名，也是变量
              name:'img/[name].[hash:8].[ext]'
            }
          }
        ]
      }
//当加载的图片大于limit的值时，需要使用file-loader模块进行加载
//需要安装 npm install file-loader --save-dev

三、将es6转成es5进行打包
es6转换成es5
npm install --save-dev babel-loader@7.1.5 babel-core@6.26.3 babel-preset-es2015@6.24.1
在webpack.config.js里module里rules里加上：
{
        test: /\.js$/,
         //exclude： 排除
          //include: 包含
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      }


四、在项目中运行vue
Vue
npm install vue@2.5.21 --save
解决运行vue项目后template报错的方法：（因为默认的设置是不可以有template的，template就是vue实例挂载得HTML标签，现在通过以下代码改为允许有template）
在webpack.config.js里的 module.exports里加上如下代码：

resolve: {
  //alias别名的意思
  alias: {
    'vue$':'vue/dist/vue.esm.js'
  }
}