webpack（二）基本配置及使用

上一篇博客里面介绍了什么是 webpack，及 webpack 的基本安装。这节主要是对基本配置及打包的一个总结。来一波实际操作

（请确保电脑里已经装了node）

我们先建一个空文件夹，然后打开命令行，cd进入你新建的文件目录下面（也可以在编辑器中的终端执行以下操作）

1. 初始化项目，一路回车，初始化成功后文件夹里有一个 package.json

npm init

2. 安装webpack,执行以下命令。这个最好不要用最新版本，因为会出现各种问题（很是让人头疼）

    安装成功之后，文件夹中会新增两个文件，node_modules 和 package-lock.json

 npm install --save-dev webpack@2.6.0

3.新建一些需要的文件（html，css，js，img），然后先来看 js 的打包，如图，在新建的index.js中写入内容，index.html中引入的js，是打包后的js。这儿将会遇到一个坑，（还是因为版本问题啊）

小伙伴们可以手动执行一次，我们如何跳过这个坑呢

首先，webpack -v，检查一下你的webpack是哪个版本，如果是2+，3+版本，运行

webpack entry.js bundle.js

如果是4+以上的版本，则运行

webpack entry.js -o bundle.js

然后在浏览器打开你的index.html，就会在页面上看见 你所写的内容，这个是很简单的，它还可以把多个文件打包成一个，例如，我们再建一个module.js（让它作为一个模块文件）

执行命令 webpack entry.js -o bundle.js（根据实际情况使用对应的命令），然后刷新浏览器，就会看到更改后的内容

4.现在我们来看css的打包，新建一个index.css文件

这个时候呢，直接运行 webpack entry.js -o bundle.js 就会报错，因为webpack本身是只对 js 进行打包，如果想打包css，我们就需要通过加载器的方式，把相关的插件引进来之后，才可以进行其他类型的打包处理

打包css，执行以下命令，这两加载器的作用 css-loader 是来识别css文件的，把css作为一个打包处理，style-loader 是把文件内容部生成style标签，让我们的打包样式在浏览器中识别出来。

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

下载成功后我们就需要改一下 entry.js 里面引入的css了

然后执行命令 webpack entry.js  -o bundle.js，然后刷新你的浏览器就可以看到刚才写的css了

5.图片的打包，建一个存放图片的文件夹，如img。图片的打包也是需要安装相关的加载器，执行以下命令安装：

npm install url-loader file-loader --save-dev

补充：url-loader是对file-loader的上层封装，使用时需要配合 file-loader 使用

在我们安装成功之后，执行打包命令，会出现一个报错，之前再打包css时，是不加会报错，到图片这是加上报错把它去掉就好了，然后再执行打包命令就会生效，刷新浏览器，就看到效果了

还有一个是webpack.config.js 这个文件，里面是一些配置，在Vue里面是自动创建的，这儿就得我们手动创建了，已经对应写了备注。

const path = require('path'); // node 内置的模块用来去设置路径的
const HtmlWebpackPlugin = require('html-webpack-plugin'); //自动生成html文件的插件
const CleanWebpackPlugin = require('clean-webpack-plugin'); //清除之前打包的文件

module.exports = {
    entry: './src/js/entry.js',// 入口文件的配置
    output: {                    // 出口/输出的配置
        filename: 'bundle.js', //  输出的文件名
        // publicPath:'js/',       //设置为index.html 提供资源服务的时候带有强制性
        path: path.resolve(__dirname, 'dist/js')
    },
// 模块，例如解读css，图片转换压缩
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192
                        }
                    }
                ]
            }
        ]
    },
    devServer:{
        // contentBase:'dist/' //webpack-dev-server 默认服务于根路径下index。html
    },
    //插件，用于生产模块和各项功能
    plugins: [
        new HtmlWebpackPlugin({template: './index.html'}),
        new CleanWebpackPlugin(['dist']),
    ]
};

本文会不断持续更新，如有不足之处，请大家多多指教。此博客为博主原创，未经允许不得转载，转载请著名出处，原文链接

https://blog.csdn.net/qq_40701522/article/details/83504526