webpack搭建最基础vue项目

搭建步骤

1. npm init (初始化项目，初始化成一个npm项目)
2. npm i webpack vue vue-loader(配置webpack和vue，根据提示少什么 依赖 安装什么 依赖)
3. 新建 /src/app.vue 文件( /src-源码放置的目录；)
4. 新建 /src/index.js (入口文件)
5. 新建/webpack.config.js (webpack-帮我们打包前端资源；)
6. npm run build(打包；如果报错依次执行3个命令：1，npm i webpack -g；2，npm i webpack-cli -g；3，npm install webpack-dev-server --save-dev；)
7. npm i style-loader url-loader file-loader(rules配置相应的loader,安装相应的loader）
8. npm i stylus-loader stylus（安装stylus-loader）
9. npm i cross-env
10. npm i html-webpack-plugin (插件)
11. npm i postcss-loader autoprefixer babel-loader babel-core(优化css属性)
12. npm i babel-preset-env babel-plugin-transform-vue-jsx（使vue支持jsx）
13. 新建/.babelrc 新建/postcss.config.js
14. npm i extract-text-webpack-plugin(不支持webpack4)

package.son

{
  "name": "todolist",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.0.0",
    "autoprefixer": "^9.7.0",
    "babel-core": "^6.26.3",
    "babel-helper-vue-jsx-merge-props": "^2.0.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "babel-preset-env": "^1.7.0",
    "cross-env": "^6.0.3",
    "css-loader": "^3.2.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^3.2.0",
    "postcss-loader": "^3.0.0",
    "style-loader": "^1.0.0",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "url-loader": "^2.2.0",
    "vue": "^2.6.10",
    "vue-loader": "^15.7.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.41.2"
  },
  "devDependencies": {
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.9.0"
  }
}

webpack.config.js

const path = require('path')
const HTMLPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin'); //引入这行
const webpack = require('webpack')
// const ExtractPlugin = require('extract-text-webpack-plugin')

const isDev = process.env.NODE_ENV === 'development'

const config = {
    mode: "none",
    target: "web",
    entry: path.join(__dirname, 'src/index.js'),
    output: {
        filename: 'bundle.[hash:8].js',
        path: path.join(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.jsx$/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            },
            
            {
                test: /\.(gif|jpeg|jpg|png|svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1024,
                            name: '[name]-aaa.[ext]'
                        }
                    }
                ]
            }

        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: isDev? '"development"' : '"production"'
            }
        }),
        new HTMLPlugin(),
        new VueLoaderPlugin() //new一个实例
    ]
}

if(isDev){
    config.module.rules.push({
        test: /\.styl/,
        use: [
            'style-loader',
            'css-loader',
            {
                loader: 'postcss-loader',
                options: {
                    sourceMap: true
                }
            },
            'stylus-loader'
        ]
    })
    config.devtool = '#cheap-module-eval-source-map'
    config.devServer = {
        port: 8000,
        host: '0.0.0.0',
        overlay: {
            errors: true,
            
        },
        hot: true
        // open: false

    }

    config.plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()

    )
} else {
    config.entry = {    //优化：单独打包
        app: path.join(__dirname, 'src/index.js'),
        vendor: ['vue']
    }
    config.output.filename = '[name].[chunkhash:8].js'
    config.module.rules.push({
        test: /\.styl/,
        // use: ExtractPlugin.extract({
        //     fallback: 'style-loader',
            use: [
                'css-loader',
                {
                    loader: 'postcss-loader',
                    options: {
                        //用于解决url()路径解析错误
                        url:false,
                        minimize:true,
                        sourceMap: true
                    }
                },
                'stylus-loader'
            ]
        // })
    })
    // config.plugins.push(
    //     new ExtractPlugin('styles.[contentHash:8].css')
    //     new config.optimization.splitChunks({
    //         name: 'vendor'
    //     })
    // )
}

module.exports = config

app.vue

<template>
    <div id='test'>{{text}}</div>
</template>

<script>
export default {
    data() {
        return{
            text: 'aaa'
        }
    }
}
</script>

<style scoped>
#test{
    color: red;
}
</style>

index.js

import Vue from 'vue'
import App from './app.vue'

import './assets/styles/test.css'
import './assets/images/bg.jpg'

const root = document.createElement('div')
document.body.appendChild(root)

new Vue({
    render: (h) => h(App)
}).$mount(root)

.babelrc

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

postcss.config.js

const autoprefixer = require('autoprefixer')

module.exports = {
    plugins: [
        autoprefixer()  //优化css属性
    ]
}