手动使用webpack + vue 构建项目

[Webpack地址] https://webpack.js.org
前提:
安装 webpack webpack-cli 这两个全局包
npm i webpack webpack-cli -g

创建项目目录

 新建以下文件
        |--src 项目的源代码目录
            |--main.js 项目的入口文件
            |--App.vue 根组件
        |--package.json 项目配置文件
            npm init -y （-y代表默认配置）
        |--webpack.config.dev.js  项目开发阶段的配置文件
        |--index.html 

在新建的文件中写代码

App.vue
    写上hello Vue
    
main.js
    导入根组件【使用es6的语法】，渲染根组件【利用Vue】
    
webpack.config.dev.js
配置相关文件并安装相关依赖包
    "dependencies": {
        "html-webpack-plugin" //打包html 要配置
        "vue"
        "webpack"
        "webpack-dev-server" 
      },
  "devDependencies": {
        "vue-template-compiler" //vue-loader的依赖
        "vue-loader"
        "webpack-cli"
      }

webpack基本配置

const VueLoaderPlugin = require('vue-loader/lib/plugin')
//Vue Loader v15现在需要一个附带的webpack插件才能正常运行
const HtmlWebpackPlugin = require('html-webpack-plugin')
// html-webpack-plugin需要先导入
module.exports = {
    mode: 'development', //配置开发环境的配置时候需要mode
    entry: './src/main.js',
    module: {
        rules: [{
            test: /\.vue$/,
            use: 'vue-loader'
        }]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template:'./index.html' //指定打包的html
        }),
        
      ]
}

运行

利用 webpack-dev-server + html-webpack-plugin 运行我们的项目

配置项目运行脚本
webpack-dev-server【只是打包生成了bundle.js】

webpack-dev-server --progress --config webpack.config.dev.js --open --hot

把上面的指令，放在package.json的scripts中

"dev":"webpack-dev-server --progress --config webpack.config.dev.js --open --hot"

html-webpack-plugin【帮我们生成index.html并且自动导入bundle.js】

使用css样式

{
test: /\.css$/,
     use: [
        {
         loader: 'style-loader'
        },
        {
         loader: 'css-loader'
         }
     ]
}