从零学习搭建webpack工程（三）发现文件dist下没有生成css文件，此时的css被打包在了js中。如果要打包css

传送门：

五、利用babel对ES6进行编译

1、安装依赖`babel-loader` `@babel/core` `@babel/plugin-syntax-dynamic-import` `@babel/plugin-transform-runtime` `@babel/preset-env`

npm install -D babel-loader @babel/core @babel/plugin-syntax-dynamic-import @babel/plugin-transform-runtime @babel/preset-env

2、安装依赖 `@babel/runtime`

npm install -S @babel/runtime

3、配置webpack.config.js中的babel-loader

    module: {
        rules: [
            {
                test: /\.js$/,//匹配规则后缀名.js文件
                use: {
                    loader: 'babel-loader'
                },
                exclude: /node_modules/ //忽略node_modules下的js文件
            }
        ]
    },

4、配置编译ES6需要的plugin

在根目录下新建 babel.config.js

module.exports = {
    "presets": [
        "@babel/preset-env"
    ],
    "plugins": [
        "@babel/plugin-transform-runtime",
        "@babel/plugin-syntax-dynamic-import"
    ]
}

5、在index.js中添加ES6代码

let value = 'hello webpack'
const createElement = (value) => {
    const box = document.createElement("div")
    box.innerHTML = value
    document.body.appendChild(box)
}
createElement(value)
createElement("hello ES6")
createElement("hello weixiao")

6、`npm run dev`或 `npm run build`

编译后的代码

六、利用loader对css，scss，sass，less，编译打包

1、安装依赖

npm install -D style-loader css-loader postcss-loader autoprefixer

npm install -D mini-css-extract-plugin

npm install -D less less-loader

npm install -D node-sass sass-loader

2、配置css，less，sass

在webpack.config.js中配置loader

   module: {
    rules: [
        {
            test: /\.js$/,
            use: {
                loader: 'babel-loader'
            },
            exclude: /node_modules/
        },
        {
            test: /\.(css|scss|sass)$/,
            use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
        },
        {
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
        }
    ]
}

4、配置postcss-loader需要的plugin

在根目录下新建 postcss.config.js文件

module.exports = {
plugins: [
    require("autoprefixer")
    ]
}

5、src下新建style文件夹

新建文件index.css

body {
  background: #000;
}

新建文件index.scss

body {
  color: #fff;
}

新建文件index.less

body {
    div {
        background: green;
    }
}

6、在index.js中引入三个样式文件

import "./style/index.css"
import "./style/index.scss"
import "./style/index.less"

7、npm run dev

8、npm run build

发现文件dist下没有生成css文件，此时的css被打包在了js中。如果要打包css文件，我们需要安装新的plugin

七、利用mini-css-extrac-plugin打包css文件

1、安装依赖mini-css-extrac-plugin

npm install -D mini-css-extract-plugin

2、配置mini-css-extract-plugin

在webpack.config.js中引入，将匹配css，scss，sass，less中的loader中的style-loader替换为 MiniCssExtractPlugin.loader

3、配置plugin

    new MiniCssExtractPlugin({
        filename: "css/[name].[hash:7].css",
        chunkFilename: "css/[id].[hash:7].css"
    })

4、npm run build执行

dist文件如下

八、安装loader实现对图片，字体图标的打包

1、安装loader

npm install -D url-loader 
npm install -D html-withimg-loader  //解析html中img

2、配置weboack.config.js中loader

           {
            test: /\.(jpg|png|gif|svg)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 1024 * 1,//图片大小，小于1024k编译到js中，否则编译到文件中
                    name: '[name].[hash:7].[ext]',
                    publicPath: '../images',//路径
                    outputPath: 'images/'//输出路径
                }
            }
        },
        {
            test: /\.(woff|woff2|eot|ttf|otf)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 1024 * 1,
                    name: '[name].[hash:7].[ext]',
                    publicPath: '../font',
                    outputPath: 'font/'
                }
            }
        },
        {
            test: /\.html$/i,
            loader: "html-withimg-loader"
        }

踩坑： css文件中的backgroundImage路径为 publicPath+name。路径报错可尝试修改publicPath

3、index.js中添加

import image from "./assest/image/0.jpg"//路径为存放图片的地址
document.body.style.backgroundImage = `url(${image})`

4、在index.html中添加 img 以及iconfont

<div><i class="icon iconfont icon-shangpin">icon webpack</i></div>
<img src="./src/assest/image/0.jpg" alt="">

5、npm run dev | npm run build

打包后会在dist文件下生成 images文件夹和font文件夹