vue+webpack 搭建

最新推荐文章于 2024-10-11 18:35:46 发布

Fire in rain

最新推荐文章于 2024-10-11 18:35:46 发布

阅读量295

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/u013236043/article/details/105635515

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1.node安装自行百度

2.先建文件文件夹vueweb 键入文件夹 npm init

3.安装装vue webpack 执行命令 npm i webpack vue vue-loader

4.webpack 4 需要安装 webpack-cli npm i webpack-cli

5.还需要安装vue-loader-plugin vue-template-compiler css-loader sass-loader node-sass

6.新建文件夹src 先建 index.js app.vue

import Vue from 'vue';
import App from './app.vue'
const root = document.createElement('div')
document.body.appendChild(root)


new Vue({
    render: (h) => h(App)
}).$mount(root)

<template>
  <div>
    {{test}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      test: "hello  world"
    };
  },
};
</script>

7.先建webpack-config.js (注意细节，容易写错，直接去webpack官网复制)

const path = require('path');
const VueloaderPlugin = require('vue-loader/lib/plugin')

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

    module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader'
        }]
    },
    plugins: [
        new VueloaderPlugin()
    ]
};

8.添加webpack 启动 package.json配置

"build": "webpack --config webpack.config.js"

9.然后npm run build 可以看到 dist文件夹下生成了 bundle.js

10.还有一些配置如下：

const path = require('path');
const VueloaderPlugin = require('vue-loader/lib/plugin')
const HTMLPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const isDev = process.env.NODE_ENV === 'development' //判断当前运行环境

const config = {
    entry: path.join(__dirname, './src/index.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },

    plugins: [
        new CleanWebpackPlugin(),
        new VueloaderPlugin(),
        new HTMLPlugin(), //给工程添加入口文件
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: isDev ? '"development"' : '"production"'
            }
        })
    ],
    module: {
        rules: [{
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.s(a|c)ss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 1024,
                        name: '[name].[ext]'
                    }
                }]
            }
        ]
    }

};

if (isDev) { //配置开发环境的
    config.devtool = "#cheap-module-eval-source-map" //调试的时候 以源代码显示
    config.devServer = {
            // 启动的服务端口
            port: 8000,
            // 通过localhost或IP进行访问
            host: '0.0.0.0',
            // 若编译过程中有错误，显示到网页上,便于定位错误
            overlay: {
                errors: true,
            },
            //热加载
            hot: true, //只刷新修改的组件
            //  open: true   //自动打开浏览器，
            historyApiFallback: true
                // historyApiFallback: { //匹配错误路由
                //     rewrites: [{
                //         from: /.*/g,
                //         to: 'index.html'
                //     }]
                // },

        },
        // 加插件，push一个新的webpack plugin
        //下面是不刷新更新内容
        config.plugins.push(
            // 启动热更新功能插件
            new webpack.HotModuleReplacementPlugin(),
            // 帮助减少不需要的信息展示
            new webpack.NoEmitOnErrorsPlugin()
        )
}

module.exports = config

11.添加postcss 与 babel 配置 npm i postcss-loader autoprefixer npm i babel-preset-lenv babel-plugin-tranform-vue-jsx

创建postcss.config.js 与 .babelrc

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
};

{
    "presets": ["env"],
    "plugins": [
        "tranform-vue-jsx"
    ]
}

最后再webpack中配置

最后 webpack 分开打包 cnpm install extract-text-webpack-plugin@next -D 配置如下

const path = require('path');
const VueloaderPlugin = require('vue-loader/lib/plugin')
const HTMLPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin');
const ExtractPlugin = require('extract-text-webpack-plugin') //将css文件单独打包出来

const isDev = process.env.NODE_ENV === 'development' //判断当前运行环境

const config = {
    entry: path.join(__dirname, './src/index.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },

    plugins: [
        new CleanWebpackPlugin(),
        new VueloaderPlugin(),
        new HTMLPlugin(), //给工程添加入口文件
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: isDev ? '"development"' : '"production"'
            }
        })
    ],
    module: {
        rules: [{
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.jsx$/,
                loader: 'babel-loader'
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 1024,
                        name: '[name].[ext]'
                    }
                }]
            }
        ]
    }

};


if (isDev) { //配置开发环境的
    config.module.rules.push({
        test: /\.s(a|c)ss$/,
        use: ['style-loader', 'css-loader', {
            loader: 'postcss-loader',
            options: {
                sourceMap: true
            }
        }, 'sass-loader']
    })
    config.devtool = "#cheap-module-eval-source-map" //调试的时候 以源代码显示
    config.devServer = {
            // 启动的服务端口
            port: 8000,
            // 通过localhost或IP进行访问
            host: '0.0.0.0',
            // 若编译过程中有错误，显示到网页上,便于定位错误
            overlay: {
                errors: true,
            },
            //热加载
            hot: true, //只刷新修改的组件
            //  open: true   //自动打开浏览器，
            historyApiFallback: true
                // historyApiFallback: { //匹配错误路由
                //     rewrites: [{
                //         from: /.*/g,
                //         to: 'index.html'
                //     }]
                // },

        },
        // 加插件，push一个新的webpack plugin
        //下面是不刷新更新内容
        config.plugins.push(
            // 启动热更新功能插件
            new webpack.HotModuleReplacementPlugin(),
            // 帮助减少不需要的信息展示
            new webpack.NoEmitOnErrorsPlugin()
        )
} else {
    config.entry = {
        app: path.join(__dirname, './src/index.js'),
        vendor: ['vue']
    }
    config.output.filename = '[name].[chunkhash:8].js'
    config.module.rules.push({
        test: /\.s(a|c)ss$/,
        use: ExtractPlugin.extract({
            fallback: 'style-loader',
            use: [{
                loader: 'postcss-loader',
                options: {
                    sourceMap: true
                }
            }, 'sass-loader']
        })
    })
    config.plugins.push(
        new ExtractPlugin('[name]_[md5:contenthash:hex:8].css'),
        new webpack.optimize.SplitChunksPlugin({ //拆分业务代码也类库代码
            name: 'vendor'

        }),
        new webpack.optimize.RuntimeChunkPlugin({ //mainfest  打包在一各文件  新模块加入hash可以长缓存
            name: 'runtime'
        })
    )


}



module.exports = config