webpack系列学习（一）基础安装与配置

我在空闲时间，学习了一下webpack的一门教程，断断续续全看完大概有十几个小时，当时做了一些笔记，现在整理一下，也算是复习，当然有兴趣的朋友也可以一起来学习下。我是看了网易云课堂的一门教程，链接：webpack从入门到精通
下边开始我的笔记啦~~ 系统：windows10
一、新建文件夹与文件

1. 新建文件夹起名为webpackFirst，新建src文件夹，src文件夹下新建css文件夹，js文件夹，和index.html文件。在src文件夹同级新建webapck.config.js文件，作为webpack的配置入口。如图1.1

1.1.png
二、全局与本地安装webpack
打开终端：

全局安装：`cnpm i webpack webpack-cli -g`
本地安装：`cnpm i webpack webpack-cli -D`
初始化项目：`npm init -y`
如图1.2

1.2.png

目前，基本的文件创建好了，下边开始写webpack.config.js配置内容。

三、webpack.config.js配置

我们先做一些基本的配置

`// 开发环境配置`
const {resolve} = require('path');
`// 引入插件`
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    plugins: [
    `// 默认创建一个空的html，自动引入打包输出的所有资源`
        new htmlWebpackPlugin()
    ],
    mode: 'development'
}

由于我们引入了htmlWebpackPlugin插件，所有需要先安装此插件。打开终端输入

cnpm i html-webpack-plugin -D

接下来，加一些基本的打包配置
3.1安装以下loader，打包css和图片等资源

cnpm i css-loader style-loader -D // 打包样式css
cnpm i less-loader -D // 打包less
cnpm i less -D
cnpm i url-loader file-loader -D // 加载图片
cnpm i html-loader -D // 处理html文件中的img

安装完毕，在到webpack.config.js文件进行配置
首先是css文件和less文件

    module: {
        rules: [
            {
                test: /\.css$/,
                use:[
                    'style-loader',
                    'css-loader',
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                // 处理图片资源，但处理不了html中的图片
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    limit: 8 * 1024,
                    esModule: false,
                    name: '[hash:10].[ext]',
                    outputPath: 'imgs' // 输出到imgs文件夹
                }
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                // 处理其他资源
                exclude: /\.(html|js|css|less|jpg|png|gif)/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]',
                    outputPath: 'media'
                }
            }
        ]
    },

在src文件夹下新建index.html文件，引入相应的图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
<body>
    <!-- 123123 -->
    <div id="title">测试 less</div>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3">图片4</div>
    <div id="div4"><img src="./img/vue.jpg" alt="vue"></div>
    <div>123</div>
</body>
</html>

新建img文件夹，放入几张图片，并在css文件夹下新建index.css和index.less文件，代码如下：
index.css

html, body{
    background-color: pink;
    display: flex;
    backface-visibility: hidden;
}
#div3{
    width: 300px;
    height: 300px;
    color: red;
    background-image: url(../img/angular.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

index.less

#title{
    background-color: red;
}
#div1{
    width: 100px;
    height: 100px;
    background-image: url(../img/vue3.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
#div2{
    width: 200px;
    height: 200px;
    background-image: url(../img/react.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

在index.js里引入css和less文件

import '../css/index.css';
import '../css/index.less';

运行，在终端输入webpack回车，可以看到生成build文件夹，打开后包含img文件夹，js文件夹和index.html文件,打开index.html文件，右键open with live server查看效果，如图3.1所示：
3.1.png

以上是开发环境的基本配置，下一章为大家写webpack-dev-server，安装开发服务。

webpack系列学习（一）基础安装与配置

小鹏

引用和评论

图片加载

CSS团队协作规范

100个React最佳实践小技巧

前端开发工具

开发插件集合

Javascript(turfjs)等值线图绘制

JS校验身份证号