webpack 搭建 vue项目

webpack 搭建 vue项目

初始化项目

npm init -y

安装 webpack webpack-cli

npm i webpack webpack-cli

配置启动命令

 "scripts": {
    
    
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",
    "dev": "webpack --mode development",
    "serve": "webpack serve --open"
  },

创建对应的vue项目结构

• public
  • index.html （模板）
• src
  • assets （静态资源）
  • components （组件）
  • store (vuex)
  • router （router）
  • views (页面级组件)
  • App.vue （vue的入口页面）
  • main.js （vue的入口文件）
• package.json

识别vue 语法和 .vue 文件

安装vue 和 vue-loader

npm i vue --save-dev
npm i vue-loader vue-template-compiler --save

识别css文件

安装 css-loader style-loader (vue-style-loader: 源于style-loader )

npm i css-loader style-loader --save

识别图片

安装 url-loader file-loader

npm i url-loader file-loader  --save

热更新

安装webpack-dev-server

npm i webpack-dev-server --save

router vuex

安装 router 和 vuex

npm i router vuex --save-dev

配置webpack.config.js 文件

完整的配置

const path = require('path')
//  自动清除dist文件夹和里边所有的文件
const {
    
    CleanWebpackPlugin} = require('clean-webpack-plugin')
//  根据指定的模板生成对应的HTML文件，并且自动引入js文件
const HtmlWebpackPlugin = require('html-webpack-plugin')
//  不需单独安装 ， 是vue-loader 内置的插件，可以直接拿来使用
const VueLoaderPlugin = require('vue-loader/lib/plugin')
//  提取css 生成单独的css文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    
    
    //  mode 模式设置  mode:'development',
    mode:'production',
    entry:'./src/main.js',
    output:{
    
    
        path:path.resolve(__dirname, 'dist'),
        // filename:'js/[name].js'
        //  输入文件
        filename:'js/index.js'
    },

    module:{
    
    
        rules:[
            //  vue解析
            {
    
    
                test:/\.vue$/,
                use:['vue-loader']
            },
            //  css解析
            {
    
    
                test:/\.css$/,
                // use:['style-loader', 'css-loader']
                use:[MiniCssExtractPlugin.loader, 'css-loader']
            },
            //  图片解析
            {
    
    
                test:/\.(jpe?g|png|gif|webp)$/,
                use:[
                    {
    
    
                        loader:'url-loader',
                        options:{
    
    
                            limit:8192,
                            name:'img/[name]-[hash:5].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    //  插件
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
    
    
            template:'./public/index.html',
            filename:'index.html'
        }),
        //  结合vue-loader使用
        new VueLoaderPlugin(),
        //  单独生成css文件
        new MiniCssExtractPlugin({
    
    
            filename:"css/[name].css"
        })
        
    ],

    devServer: {
    
    
        //  服务器的根目录
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000,
    },
}

需求：针对项目需要完成的操作

1. 入口文件

2. 出口文件

3. 模块加载

   • vue-loader
   • css-loader
   • style-loader
   • url-loader

4. 插件配置

   • htmlwebpackplugin
   • cleanwebpackplugin
   • vueloaderplugin
   • MiniCssExtractPlugin

5. 热更新

开发环境
3. 热更新
4. 模块
vue-loader

    style-loader
5. 插件
    cleanwebpackplugin
    htmlwebpackplugin

生产环境
4. 模块
css-loader
5. 插件
MiniCssExtractPlugin

基础配置

1. 入口文件
2. 出口文件
3. 模块
   css-loader

webpack的环境配置