webpack初步搭建Vue项目

最新推荐文章于 2025-09-12 15:47:36 发布

转载最新推荐文章于 2025-09-12 15:47:36 发布 · 67 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/pluslius/p/9984656.html

文章标签：

#webpack #javascript #json #ViewUI

本文详细介绍了使用Webpack、Babel、Vue等工具搭建前端项目的全过程，包括安装必要依赖、配置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()
    ]
}

转载于:https://www.cnblogs.com/pluslius/p/9984656.html