webpack的基本配置(初识)

webpack能根据模块的依赖关系递归地构建一个依赖关系图,当中包含了应用程序所需要的所有模块,最后打包成一个或多个bundle.它有四个核心概念entry、output

、loader、plugin.下面介绍其基本使用:

1.新建一个webpacktest文件夹,下面新建两个文件夹分别为src、dist.

2.在终端打开webpacktest,执行npm init 初始化后目录下会多一个package.json文件,再安装Webpack包.

(1)全局安装webpack(只在该项目中用,就不用-g)

npm install -g webpack webpack-cli

(2)在src文件夹下建一个index.js作为默认的入口文件

　　在index.js中写入测试代码,如下:

console.log("hello world");

(3)在package.json文件中,写入下列代码

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode development" // 写入这句代码,利用webpack进行打包,并把模式设置为 --mode development
  }

模式有两种:development(打包后代码不压缩)、production(打包后代码压缩)

(4)现在在终端运行npm run build ,dist文件夹下就生成了打包好的main.js文件(dist下的main.js是默认的出口文件).

npm run build

以上是零配置的webpack。

3.在根目录下建一个webpack.config.js文件(以下简称配置文件),对webpack进行配置

(注意:每次改写配置文件,都要重新启动,才能生效)

(1)首先配置好入口和出口文件

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js' //bundle.js是打包后在dist文件夹下生成的文件名(之前默认的是main.js),也可以改为其他的名字
    }
};

现在npm run build , dist 文件下会生成一个bundle.js文件(main.js文件还在)

(2)在根目录下,新建一个index.html文件,来引用生成的bundle.js文件(测试打包是否成功),并在浏览器中打开,浏览器控制台就能显示hello world了。

但是这样每次修改src下的index.js文件后,都需要重新运行npm run build,非常麻烦。

改写package.json文件,使webpack可以实时监听src下index.js文件的变化,自动打包。

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production -w" //只用配置上 -w
  }

(3)设置hash码,解决缓存的问题

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle[hash:8].js' //设置8位hash值
    }
};

现在打包后index.html要引入dist中生成的js文件非常的麻烦,因为每次改动src下的index.js文件都会自动生成带有不同hash值的bundle.js文件.因此要安装下面的插件.

(4)安装html-webpack-plugin插件(上面的index.html引入bundle.js文件是手动引入的,这个插件可以自动引入)

作用:1.这个插件还会自动根据html模板,在dist文件下生成一个html文件2.自动引入打包后的js文件

npm i --save-dev html-webpack-plugin

在配置文件中引入

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //引入插件

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle[hash:8].js'
    },
    plugins: [
        new HtmlWebpackPlugin({ template: './index.html' })  //实例化 并且将根目录下的index.html文件作为模板
    ]
};

这时候你发现,dist文件夹下,有很多之前打包生成的文件,它们不会自动清除.因此要下载下面的插件.解决这个问题.

(5)安装clean-webpack-plugin插件(清除之前的打包文件,只留下当前的打包文件)

npm install --save-dev clean-webpack-plugin

在配置文件中引入

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {

    entry: './src/index.js',

    output: {

        path: path.resolve(__dirname, 'dist'),

        filename: 'bundle[hash:8].js'

    },

    plugins: [

        new HtmlWebpackPlugin({ template: './index.html' }),

        new CleanWebpackPlugin()

    ]

};

现在打包后,之前的文件就会自动被清除了.

(6)现在还不能引入css样式,要想加载css样式,要下载style-loader、css-loader包

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

在src下新建index.css文件并写入样式,并在index.js中引入该文件

在配置文件中引入插件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle[hash:8].js'
    },
    module: {                  //配置
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({ template: './index.html' }),
        new CleanWebpackPlugin()
    ]
};

现在再次进行打包,可以在浏览器看到写入的样式已经生效了.

webpack只能解析js文件,想要解析css、图片等文件都要下载相关的插件(加载器)(参考webpack官网).解析图片要下载file-loader、url-loader。

(7)下载webpack-dev-server插件

npm install webpack-dev-server --save-dev

改写package.json文件

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production -w",
    "start":"webpack-dev-server --progress --open -w"    //插入这行代码
  }

--progress 显示进度条  --open自动打开浏览器  -w监听

在配置文件中配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle[hash:8].js'
    },
    devServer: {
        inline: true,   //热更新,改变文件,浏览器自动更新
        port: 8000      //改变端口为8000
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({ template: './index.html' }),
        new CleanWebpackPlugin()
    ]
};

现在运行 npm start  会显示打包的进度条(因为现在打包文件太小,可能看不到)浏览器会自动跳出窗口。