自己搭建一个webpack 4 + vue项目_vue创建一个webpack4版本的vue项目-优快云博客

本文链接：https://blog.youkuaiyun.com/u012149906/article/details/105602941

自己搭建一个webpack vue项目

创建一个项目文件夹，例如vue_webpack,然后再v s code中打开
按组合键ctrl+·（也就是tab键上面的那个）

然后一直按回车键，默认下一步。完成后在文件夹中生成package.json文件。

3. 然后安装webpack

执行npm i webpack webpack-cli –save-dev(分别为核心模块和命令行工具，必须安装)

执行 npm i webpack-dev-sever –save-dev 安装提供服务的工具

4. 因为我们搭建的是vue项目所以需要安装vue相关的

执行 npm i vue

npm i vue-loader –save-dev（处理vue文件）

npm i vue-style-loader –save-dev(处理vue文件中的style)

npm i vue-template-compiler（处理vue文件中的template）

npm i vue-hot-reload-api（热重载）

5.我们还需要处理ES6语法，一定要注意版本问题，都采用统一版本，比如6版本或是7版本，7版本带有@

执行 npm i babel-loader @babel/preset-env @babel/core

执行 npm i @babel/plugin-transform-runtime

执行npm i @babel/preset-es2015

6.Webpack会依赖.babelrc的文件来使用babel编译ES6代码，所以我们在根目录下创建.babelrc的文件，并且写入以下配置：

{
    "presets": ["@babel/preset-env"],
    "plugins": ["@babel/plugin-transform-runtime"],
    "comments":false
}

怎么看是7版本呢？在package.json文件中看

如果是6版本的话.babelrc的配置就不是这样

如果使用的版本和配置不一致就会报错了。一般是报这个错：

Plugin/Preset files are not allowed to export objects，……

7.我们需要支持图片、字体等文件的话，我们还需要url-loader和file-loader

npm i url-loader file-loader –save-dev

8. 以上是我根据自己的需要，提前安装的模块，一般我们会在项目需要的时候，或是根据报错提示来安装，那么下面我们开始写代码测试吧。

9.我们在根目录下创建一个index.html,加入代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>my first webpack app</title>
</head>

<body>
    <div id="app">

    </div>

</script>
   
</body>

</html>

10.我们再到根目录下创建一个src文件夹，这是作为资源文件夹。再创建一个dist文件夹，dist文件夹是资源输出所在文件夹。在src文件夹中创建index.js文件和app.vue文件。

在index.js文件中引入app.vue文件

到目前为止，我们的源文件已经有了，现在需要借助webpack来打包了。

11.Webpack打包需要通过webpack.config.js文件进行配置，默认为webpack.config.js文件，但是我们在package.json中修改配置文件。比如，我们如果希望生成环境和开发环境使用不同的配置文件，那么我们可以这样做：创建一个config文件夹，config文件夹中添加webpack.config.base.js，webpack.config.dev.js,webpack.config.pro文件，其中webpck.config.base.js文件中是生产环境和开发环境公用的配置。然后再webpack.config.dev.js,webpack.config.pro.js中分别配置开发环境和生成环境所需的配置，同时引入公用配置。

12.下面来看一下在webpack.config.base.js文件中的配置。首先是入口和出口配置

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist'),
        publicPath:'/'
    },
………………………………
…………………………
}

Webpack从src/index.js开始进行打包，打包后资源输出位置为dist/bundle.js.

注意：如果我们使用的webpack-dev-server进行打包的，在打包结束后，我们在dist文件夹中是看不到文件的，因为打包结果是放在内存中的，不会实际写入文件。【从开发的角度看，这其实是合理的，因为每次都实际写入文件，最后会产生很多垃圾文件，干扰版本控制】。这一点可以通过删除dist文件夹，继续之后的测试来验证【也就是说dist文件夹可以根本就不创建】。

13.Webpack只识别js文件，要处理别的文件需要时会用loader。例如处理.vue文件需要使用vue-loader 处理css文件需要css-loader,style-loader等。

没有使用loader会报错。

Loader是在module配置项中配置的。

14.使用vue-loader处理vue文件还需要声明插件

这里我们还用到了html-webpack-plugin，它可以根据模板文件template生成输出文件，并将打包过程中生成的文件自动插入到HTML文件中，不用人工插入。

执行npm I html-webpack-plugin –save-dev

webpack.config.base.js完整代码：

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, '../dist'),
        publicPath:'/'
    },
    mode: process.env.NODE_ENV,
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader'
            }, {
                test: /\.(png|jpeg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1024,  //这里的单位是b
                            name: 'images/[name][hash].[ext]' //打包后输出路径
                        }
                    }
                ]
            },
            {
                test: /.\js/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: './index.html',//相对于根目录
            filename:'./index.html',//相对于output的路径
            inject: 'false',
            minify: {
                removeComments: true//删除注释
            }
        })
    ]


};

15.需要在公共文件中做的配置，已经完成，下面我们在webconfig.config.dev.js文件中配置开发环境。这里我们还需要安装模块

npm i webpack-merge

webconfig.config.dev.js完整代码

const base=require('./webpack.config.base.js');
const merge=require('webpack-merge');
const webpack=require('webpack');

module.exports=merge(base,{
    devServer:{
        port:8089,
        host:'127.0.0.1',
        publicPath:'/',
        open:true,
        hot:true,
        overlay:{erros:true}
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    },
    plugins:[
        new webpack.HotModuleReplacementPlugin()
    ]
})

16.对开发环境的配置基本就是这样，如果我们要打包运行那么我们还需要到package.json 文件中配置。

注：我们还需要用到一个设置当前执行环境的插件cross-env

执行 npm i cross-env

现在我们执行npm run dev就可以运行了

到这里开发环境下配置结束。我们再来看看生产环境，在生产环境下，我们一般需要将css代码分离出来，方便缓存。我们需要用到mini-css-extract-plugin。

执行 npm i mini-css-extract-plugin

每次打包后清除dist文件，安装clean-webpack-plugin

执行npm i clean-webpack-plugin

我们开始配置webpack.config.pro.js中配置生产环境需要的。

const base=require('./webpack.config.base.js')
const merge=require('webpack-merge')
const MiniCssExtractPlugin =require('mini-css-extract-plugin')
const {CleanWebpackPlugin}=require('clean-webpack-plugin')

module.exports=merge(base,{
    output:{
        filename:'js/[name][hash].js',
        chunkFilename:'js/vendor[id][hash].js'//异步chunk
    },
    optimization: {
        splitChunks: {
          cacheGroups: {
            styles: {
              name: 'styles',
              test: /\.css$/,
              chunks: 'all',
              enforce: true
            },
            vendor:{
              test: /node_modules/,
              name: 'vendor',
              chunks:'all'
          }
        }
        }
      },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    {loader:MiniCssExtractPlugin.loader},
                    'css-loader'
                     ]
            }
        ]
    },
    plugins:[
        new MiniCssExtractPlugin({filename:'css/[hash].css'}),
        new CleanWebpackPlugin()
    ]
})

同样在package.json中配置打包命令：

"build": "cross-env NODE_ENV=product webpack-dev-server --config ./config/webpack.config.pro.js"

现在我们执行npm run build，此时可以看到报错了