• Vue+Webpack项目配置


    vue-loader+webpack项目配置
    npm i webpack vue vue-loader
    npm i css-loader vue-template-compiler

    webpack.config.js

    const path = require('path')
    const VueLoaderPlugin = require('vue-loader/lib/plugin'); //引入这行
    
    const HTMLPlugin = require('html-webpack-plugin');
    const isDev = process.env.NODE_ENV === 'development'
    const webpack=require('webpack')
    
    const config = {
        target: 'web',
        entry: path.join(__dirname, 'src/index.js'),
        output: {
            filename: 'bundle.js',
            path: path.join(__dirname, 'dist')
        },
        module: {
            rules: [
                {
                    test: /.vue$/,
                    loader: 'vue-loader'
                },
                {
                    test: /.css$/,
                    use: [
                        'style-loader',
                        'css-loader'
                    ]
                },
                {
                    test: /.styl$/,
                    use: [
                        'style-loader',
                        'css-loader',
                        'stylus-loader'
                    ]
                },
                {
                    test: /.(gif|jpg|jpeg|png|svg)$/,
                    use: [
                        {
                            loader: 'url-loader',
                            options: {
                                limit: 1024,
                                name: '[name]-simon.[ext]'
                            }
                        }
                    ]
                },
            ]
        },
        plugins: [
            new VueLoaderPlugin(), //new一个实例
            new webpack.DefinePlugin({
                'process.env': {
                    NODE_ENV: isDev ? ' "development" ' : ' "production" '
                }
            }),
            new HTMLPlugin()
        ]
    }
    
    if (isDev) {
        config.devtool='#cheap-module-eval-source-map'  //生成调试代码映射
        config.devServer = {
            port: 8000,
            host: '0.0.0.0',
            overlay: {
                errors: true,
            },
            hot:true  //热加载
        }
         config.plugins.push(
             new webpack.HotModuleReplacementPlugin(),
             new webpack.NoEmitOnErrorsPlugin() 
         )
    }
    
    module.exports = config
    

    index.js

    import Vue from 'vue'
    import App from './app.vue'
    
    import   './asserts/styles/test.css'
    import  './asserts/images/beijing.jpg'
    
    const root=document.createElement('div')
    document.body.appendChild(root)
    
    new Vue({
         render:(h)=>h(App)
    }).$mount(root)
    

    webpack-dev-server的配置和使用
    npm i webpack-dev-server
    npm i cross-env //跨平台读取本地环境变量
    package.json

    "scripts": {
        "test": "echo "Error: no test specified" && exit 1",
        "build": "cross-env NODE_ENV=production  webpack --config webpack.config.js",
        "dev": "cross-env NODE_ENV=development webpack-dev-server  --config webpack.config.js"
      },
    

    webpack.config.js

    const isDev = process.env.NODE_ENV === 'development'
    
    const config={
     target: 'web',
    }
    
    if (isDev) {
        config.devtool='#cheap-module-eval-source-map'
        config.devServer = {
            port: 8000,
            host: '0.0.0.0',
            overlay: {
                errors: true,
            },
            hot:true
        }
    

    生成HTML容器
    npm i html-webpack-plugin

    const HTMLPlugin = require('html-webpack-plugin');
     new webpack.DefinePlugin({
                'process.env': {
                    NODE_ENV: isDev ? ' "development" ' : ' "production" '
                }
            }),
            new HTMLPlugin()
    
  • 相关阅读:
    scss使用指南--每天一点
    Egret引擎开发基础(一)
    vue-awesome-swiper使用自动轮播和循环轮播不生效(loop和autoplay)
    Vue项目中title的设置,使用document.title返回时不生效
    charles系列破解激活注册码
    Vscode中vue项目中无法对js进行提示
    JS数组与对象的遍历方法大全
    手把手教你用webpack3搭建react项目(开发环境和生产环境)(二)
    服务器安装redis-stat和easyNmon
    Shell备份数据库
  • 原文地址:https://www.cnblogs.com/Remedy/p/12242810.html
Copyright © 2020-2023  润新知