非脚手架创建vue项目，并使用webpack打包

1、
（1）创建***文件夹，并 npm init -y 初始化项目

（2）创建目录结构如下：

 

 

 

 

 

 index.html内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

　　main.js内容：

import Vue from 'vue' 
import App from './App.vue'
import './styles/index.css'

new Vue({
    el:'#app',
    render: h=> h(App)
})

　　

（3）安装vue：
　　npm install vue
（4）webpack安装：
　　最新版本安装 npm install --save-dev webpack
　　指定版本安装 npm install --save-dev webpack@v4.35.2
（5）如果安装的是v4+版本，还需要安装cli才能使用webpack命令：
　　npm install --save-dev webpack-cli@v3.3.6
（6）安装打包css依赖：
　　npm install --save-dev style-loader css-loader
（7）安装打包images依赖：
　　npm install --save-dev file-loader、

       npm install --save-dev html-webpack-plugin
（8）安装实时重加载依赖：
　　npm install --save-dev webpack-dev-server@v3.7.2
（9）安装浏览器兼容性依赖：
　　npm install -D babel-loader @babel/core @babel/preset-env
（10）安装打包单文件vue依赖:
　　npm install -D vue-loader vue-template-compiler

2、

配置webpack.config.js,包括以上依赖的配置及其热更新等配置，

// 引入node中的path模块，处理文件路径 的小工具
const path = require('path')
// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 1. 引入 vue-loader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')

// 1. 导入webapck, 热模块加载
const webpack = require('webpack')

// 导出一个webpack具有特殊属性配置的对象
module.exports = {
    mode: 'none', // 指定模式配置："development" | "production" | "none"
    // 入口
    entry: './src/main.js', // 入口模块文件路径 
    // 出口
    output: {
        // path: './dist/', 错误的，要指定绝对路径
        path: path.join(__dirname, './dist/'), //打包的结果文件生成的目录要是绝对路径
        filename: 'bundle.js'
    },

    // 配置插件
    plugins: [  
        new HtmlWebpackPlugin({
            // 指定要打包的模板页面
            // 就会将 index.html 打包到与 bundle.js 所在同一目录下面，
            // 同时在 index.html 中会自动的使用script 标签引入bundle.js
            template: './index.html'
        }),
        // 3. 请确保引入这个插件！
        new VueLoaderPlugin(),
        // 3. 配置热模块加载对象
        new webpack.HotModuleReplacementPlugin()
    ],
    // 实时重新加载
    devServer: {
        // 目标路径
        contentBase: './dist',
        // 2. 开启热模块加载,
        hot: true 
    },
    module: {
        rules: [ //配置转换规则
            {
                test: /\.css$/, // 注意，不要有单引号，正则表达 式，匹配 .css 文件资源 
                use: [
                    // 根据外国人的习惯来的顺序，而且顺序不要写错
                    'style-loader', // js识别css
                    'css-loader' // css 转换为 js
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            // 解决兼容性问题
            {
                test: /\.m?js$/,
                exclude: /(node_modules)/, // 排除的目录
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'] // babel中内容的转换规则工具
                    }
                }
            },
            // 2. 处理 .vue 单文件组件
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
}

　　

3、
安装后直接执行webpack命令会报错，要在项目文件夹下的package.json文件中scripts配置命令映射

"scripts":{
    "build":"webpack",
    "watch": "webpack --watch",
    "dev": "webpack-dev-server --open"
}

4、其他依赖择需安装　　

5、npm run dev  启动项目，实时预览

      npm run build 打包项目，点index.html预览项目

posted @ 2020-11-11 14:22  mark224  阅读(1028)  评论(0)    收藏  举报