欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

webpack初步搭建Vue项目

程序员文章站 2022-04-04 15:25:40
对文件进行打包 本地热更新 处理图片资源 url loader依赖file loader 处理css文件 css预处理器 预处理器工具 处理html文件 处理js文件 兼容es6写法 处理vue文件 处理vue中使用jsx文件 处理package.json跨平台传变量问题 webpack配置 单独配 ......

对文件进行打包

1. cnpm i -d webpack webpack-cli

本地热更新

1. cnpm i -d webpack-dev-server

处理图片资源

url-loader依赖file-loader

1. cnpm i -d url-loader file-loader

处理css文件

1. cnpm i -d css-loader style-loader

css预处理器

1. cnpm i -d stylus stylus-loader
2. cnpm i -d postcss-loader

预处理器工具

1. cnpm i -d autoprefixer

处理html文件

1. cnpm i -d html-webpack-plugin

处理js文件

兼容es6写法

1. cnpm i -d babel-core babel-preset-env babel-loader

处理vue文件

1. cnpm i -d vue vue-loader vue-style-loader vue-template-loader

处理vue中使用jsx文件

if using babel 7, use 4.x
if using babel 6, use 3.x

cnpm i -d
  babel-plugin-syntax-jsx
  babel-plugin-transform-vue-jsx
  babel-helper-vue-jsx-merge-props
  babel-preset-env
  

处理package.json跨平台传变量问题

cnpm i -d cross-env

webpack配置

const path = require('path')
const vueloaderplugin = require('vue-loader/lib/plugin')
const htmlplugin = require('html-webpack-plugin')
const webpack = require('webpack')

const isdev = process.env.node_env === 'development';


module.exports = {
    target:"web",
    mode:isdev ? 'development' : 'production',
    devtool:"#cheap-module-eval-source-map",
    devserver:isdev === 'development' ? {
        port:8080,
        contentbase:path.join(__dirname,'dist'),
        host:'0.0.0.0',
        overlay:{
            errors:true
        },
        hot:true
    } : {},
    entry:path.join(__dirname,'src/index.js'),
    output:{
        filename:'bundle.js',
        path:path.join(__dirname,'dist')
    },
    module:{
        rules:[
            {
                test:/\.vue$/,
                use:{
                    loader:'vue-loader'
                }
            },
            {
                test:/\.jsx$/,
                use:{
                    loader:'babel-loader'
                }
            },
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'vue-style-loader',
                    'css-loader'
                ]
            },
            {
                test:/\.styl/,
                use:[
                    'style-loader',
                    'css-loader',
                    'postcss-loader',
                    'stylus-loader'
                ]
            },
            {
                test:/\.(gif|jpg|jpeg|png|svg)/,
                use:{
                    loader:'url-loader',
                    options:{
                        limit:1024,
                        name:'[name].[ext]'
                    }
                }
            }
        ]
    },
    plugins: [

        new vueloaderplugin(),
        new htmlplugin({
            filename:'index.html',
            template:'index.html'
        }),
        new webpack.namedmodulesplugin(),
        new webpack.hotmodulereplacementplugin()
    ]
}

单独配置jsx,postcss

//.babelrc
{
    "presets":[
        "env"
    ],
    "plugins":[
        "transform-vue-jsx"
    ]
}

//postcss.config.js
const autoprefixer = require('autoprefixer')
module.exports = {
    plugins:[
        autoprefixer()
    ]
}