webpack-基础配置篇

简介

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，

然后将这些模块按照指定的规则生成对应的静态资源。

webpack的特性

1、打包 CommonJs 和 AMD 模块（以及绑定）

2、可创建单个或多个按需加载的块，以减少初始加载时间

3、在编译期间会解决依赖关系，减少了运行时的大小

4、加载器可以在编译时预处理文件，如 coffee-script 到 javascript

5、遵从多种模块标准例如

  (1)遵循ESModule标准的import声明
  
  (2)遵循Commonjs标准的require函数
  
  (3)遵循AMD标准的define函数和require函数

以我的项目开发标准来说，建议不要混着用这几种标准容易造成混淆

说明

在使用webpack之前需要对下面的几条有一定的掌握

1、安装nodejs 安装方式自行百度即可

2、对npm、yarn 有一定的使用经验 也可以使用淘宝的镜像源cnpm

cnpm安装方法链接：https://blog.csdn.net/handsomezhanghui/article/details/107129861

3、对ES6有一定的使用经验 如果没有的话请看下面的这篇教程

链接：https://blog.csdn.net/handsomezhanghui/category_9889338.html

安装webpack

1、安装webpack  
在命令行输入  cnpm i webpack  webpack-cli  -g 
注意：在webpack4.x的版本中webpack和webpack-cli 已经分开了 ，需要单独安装这两个依赖

具体配置

在项目根目录下新建 webpackconfig.js文件 内容如下

const path = require('path');

const { CleanWebpackPlugin } = require('clean-webpack-plugin'); //清空目录插件

const HtmlWebpackPlugin = require('html-webpack-plugin'); //针对HTML插件

module.exports = {
    // mode: 'production', //生产模式
    mode: 'none', //运行最原始模式 不做任何操作
    //mode: 'development', //开发模式
    entry: "./src/main.js", //入口文件
    //表示打包文件的根目录
    output: {
        filename: "bundle.js", //输出的为文件名
        path: path.join(__dirname, 'dist'), //输出目录
        //   publicPath: "./", //公共文件路径
    },
    module: {
        rules: [{
                test: /.css$/,
                use: [
                    "style-loader", "css-loader" //加载成css-loader，style-loader
                ]
            },
            {
                test: /.png$/,
                use: {
                    loader: "url-loader", //使用url-loader
                    options: {
                        limit: 10 * 1024
                    }
                }
            }, {
                test: /.js$/,
                use: {
                    loader: "babel-loader", //使用babel-loader 支持最新的ES 语法
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }, {

            }
        ]
    },
    plugins: [ //使用插件
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: "webpack hello world "
        })
    ]
};

package.json文件

{
    "name": "y",
    "version": "1.0.0",
    "main": "index.js",
    "scripts": {
        "build": "webpack"
    },
    "license": "MIT",
    "devDependencies": {
        "@babel/core": "^7.11.1",
        "@babel/preset-env": "^7.11.0",
        "babel-loader": "^8.1.0",
        "clean-webpack-plugin": "^3.0.0",
        "css-loader": "^3.2.0",
        "file-loader": "^4.2.0",
        "html-loader": "^1.1.0",
        "html-webpack-plugin": "^4.3.0",
        "style-loader": "^1.0.0",
        "url-loader": "^2.2.0",
        "webpack": "^4.40.2",
        "webpack-cli": "^3.3.9"
    },
    "dependencies": {
        "style-loader": "^1.2.1"
    }
}

谢谢观看，以上配置为简单配置，大家可以按照自己的项目需求自行增删改查