webpack打包

css-loader/style-loader

打包css文件

1、在main.js中依赖css文件

import { num,answer } from "./src/js/1.js";
console.log(num);
console.log(answer);
***require('./src/css/normal.css')

2、在集成终端下载：

npm install --save-dev css-loader和npm install style-loader --save-dev 

3、在webpack.config.js 添加：

module.exports={
    module: {
          rules: [{test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]}]}}
//css-loader负责css文件加载，style-loader负责将样式添加到DOM中，多个loader读取顺序从右向左

url-loader

webpack图片文件处理

css文件中有图片时：

body{background:url('../img/3.jpg')}

1、在main.js中依赖css文件

***require('./src/css/normal.css')

2、在集成终端下载：npm install --save-dev url-loader

3、在webpack.config.js 添加output和rules

output:{publicPath:'dist/'  //大于limit时，更改图片路径，将原图片路径改为打包的图片（图片名为哈希值）
 module: {
     rules: [{
        test: /\.(png|jpg|gif)$/,
        use: [
          {loader: 'url-loader',
            options: {
              limit: 8192,
           //图片大小小于limit时，将图片编译成Basement4字符串格式；大于时，使用file-loder进行加载（终端下载），打包时图片也进行打包，并且页面显示图片为打包图片
              name:'img/[name].[hash:8].[ext]'}}]}]    //name截取原图片名字，并加上哈希值防止命名重复

babel-loader

ES6转ES5的babel工具

打包后的bundle.js为ES5

1、在集成终端下载：

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

2、 在 webpack 配置对象webpack.config.js中，需要添加 babel-loader 到 module 的 loaders 列表中

module: {
  rules: [
    {test: /\.js$/,    //匹配js文件
      exclude: /(node_modules|bower_components)/,  //排除这些文件不进行转化
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['es2015']