webpack4 x 快速搭建vue开发环境

最新推荐文章于 2020-05-29 16:44:09 发布

weixin_33686714

最新推荐文章于 2020-05-29 16:44:09 发布

阅读量120

点赞数

CC 4.0 BY-SA版权

文章标签： webpack javascript json ViewUI

原文链接：https://juejin.im/post/5c7b3bed51882562851b6898

本文详细介绍如何使用Webpack4.x初始化项目，包括安装必要依赖、配置webpack.config.js、设置加载器及插件，并通过示例代码展示如何处理各种资源文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack version: 4.x

初始化项目(如果不需要特殊的设置可以加上 -y 参数可直接生成 package.json) macOS和linux需要加sudo

npm init
复制代码

安装各种需要的包和loader

npm install webpack  webpack-cli webpack-dev-server babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 css-loader style-loader file-loader url-loader html-webpack-plugin vue vue-router vue-loader vue-template-compiler   --save-dev
复制代码

这其中包括了css js html image vue 各种文件的 loader

新建 webpack.config.js 文件(名称必须是这个) 并且配置这个文件

/**
 * webpack config file
 */


const HtmlWebpackPlugin = require("html-webpack-plugin");

const path = require("path");

const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
    entry: "./src/index.js",
    output: {
        filename: 'bundle.js',
        path: path.resolve("./dist"),
    },
    module: {
        rules: [
           // .js 文件处理 loader
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/
            },
           // .css 文件处理 loader
           {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
           // 图片文件处理 loader
            {
                test: /\.(jpg|png|gif|jpeg)/,
                use: 'url-loader?limit=8192'
            },
            // .vue 文件处理 loader
            {
                test: /\.vue$/,
                use: 'vue-loader'
            }
        ]
    },
    
   // 插件
    plugins: [
        new HtmlWebpackPlugin({
            templalte: './src/index.html'
        }),
        new VueLoaderPlugin(),
    ],
    mode: 'production'
};
复制代码

在 package.json 文件中配置scripts

 "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --mode development"
  },
复制代码

启动测试,看服务是否启动成功,如果成功,到浏览器中访问提示的url http://localhost:8080

npm run dev
复制代码

转载于:https://juejin.im/post/5c7b3bed51882562851b6898