当前位置： 移动技术网 > IT编程>开发语言>JavaScript > webpack初步搭建Vue项目

webpack初步搭建Vue项目

2018年11月20日  | 移动技术网IT编程  | 我要评论

对文件进行打包

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:'',
            template:''
        }),
        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()
    ]
}

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网