使用webpack打包css文件

1. 安装loader

   npm i style-loader css-loader -D

2. 修改webpack.config.js这个配置文件：

   module: { // 用来配置第三方loader模块的
       rules: [ // 文件的匹配规则
           { test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则
       ]
   }

3. 注意：use表示使用哪些模块来处理test所匹配到的文件；use中相关loader模块的调用顺序是从后向前调用的.

使用webpack打包less文件

1. 安装loader

   npm i less-loader less -D

2. 修改webpack.config.js这个配置文件

   { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }

使用webpack打包sass文件

注意：有时候使用npm i node-sass -D装不上，这时候，就必须使用 cnpm i node-sass -D

1. 安装loader

   npm i sass-loader node-sass -D

2. 修改webpack.config.js这个配置文件

   { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

使用webpack处理css中的路径

1. 安装loader

   npm i url-loader file-loader -D

2. 修改webpack.config.js这个配置文件

   { test: /\.(png|jpg|gif)$/, use: 'url-loader' },
   { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }

3. 可以通过limit指定进行base64编码的图片大小；只有小于指定字节（byte）的图片才会进行base64编码,并且设置图片是否被重命名。

    { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }

使用babel处理高级JS语法

1. 运行npm i babel-core babel-loader babel-plugin-transform-runtime -D安装babel的相关loader包.
2. 运行npm i babel-preset-es2015 babel-preset-stage-0 -D安装babel转换的语法.

3. 在webpack.config.js中添加相关loader模块，其中需要注意的是，一定要把node_modules文件夹添加到排除项：

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

4. 在项目根目录中添加.babelrc文件，并修改这个配置文件如下：

   {
   "presets":["es2015", "stage-0"],
   "plugins":["transform-runtime"]
   }

5. 注意：语法插件babel-preset-es2015可以更新为babel-preset-env，它包含了所有的ES相关的语法。

注意：如果要通过路径的形式，去引入 node_modules 中相关的文件，可以直接省略 路径前面的 node_modules 这一层目录，直接写 包的名称，然后后面跟上具体的文件路径，不写 node_modules 这一层目录 ，默认 就会去 node_modules 中查找。