webpack初步搭建Vue項目

對文件進行打包

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()
    ]
}