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