webpack 常用配置

﹏ヽ暗。殇╰゛Y 2023-08-17 17:24 33阅读 0赞

webpack.config.js

const path = require('path');
    const webpack = require('webpack');
    const htmlWebpackPlugin = require('html-webpack-plugin');
    const vueLoaderPlugin = require('vue-loader/lib/plugin'); //引入这行
    
    module.exports = {
        entry: './src/main.js',
        output: {
            path: path.resolve(__dirname, './dist'),
            filename: 'boundle.js'
        },
        mode: 'development',
        devServer: {
            open: true,//自动打开浏览器
            port: 3000,//运行端口号
            contentBase: 'src',//指定跟目录
            hot: true,//启用热更新
            openPage: 'index.html'//设置默认启动页面
        },
        plugins: [
            //配置插件的节点
            new webpack.HotModuleReplacementPlugin(),//热更新
            new vueLoaderPlugin(),
            new htmlWebpackPlugin({
                //创建一个内存中生成HTML页面的插件
                //并且把打包的boundle.js自动注入到html页面中
                template: path.join(__dirname, './src/index.html'),
                filename: 'index.html'
            })
        ],
        module: {
            rules: [
                //第三方模块匹配规则
                {
                    test: /\.css$/,
                    use: [
                        'style-loader',
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: true
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                ident: 'postcss',
                                sourceMap: true,
                                plugins: (loader) => {
                                    require('autoprefixer')({ overrideBrowserslist: ['> 0.15% in CN'] })
                                }
                            }
                        }
                    ]
                },
                {
                    //处理图片路径的loader
                    test: /\.(jpg|png|gif|bmp|jpeg)$/,
                    use: {
                        loader: 'url-loader',
                        options: {
                            limit: 8501,
                            //哈希-图片原名称。图片原后缀
                            name: '[hash:8]-[name].[ext]'
                        }
                    }
                },
                {
                    test: /\.(ttf|eot|svg|woff|woff2)$/,
                    use:['url-loader']
                    // use: {
         
                    //     loader: 'url-loader',
                    //     options: {
         
    
                    //     }
                    // }
                },
                // test:/\.(ttf|eot|woff|woff2|svg)$/,
                // use:['file-loader']//1.把你的资源移动到输出目录2.返回最终引入资源的url
                {
                    test: /\.js$/,
                    exclude: /(node_modules|bower_components)/,//排除这两个里面的JS不编译
                    use: {
                        loader: 'babel-loader',
                    }
                },
                {
                    test: /\.vue$/,
                    use: [
                        {
                            loader: 'vue-loader',
                        }
                    ]
                },
                {
                    test: /\.scss$/,
                    use: ["style-loader", "css-loader", "sass-loader"]
                }
            ]
        }
    };

package.json（VUE流派）

{
      "name": "webpack-test",
      "version": "1.0.0",
      "description": "test",
      "main": "main.js",
      "dependencies": {
        "jquery": "^3.4.1",
        "node-sass": "^4.12.0",
        "vue": "^2.6.10",
        "webpack-dev-server": "^3.8.0"
      },
      "devDependencies": {
        "autoprefixer": "^9.6.1",
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.5",
        "babel-plugin-transform-runtime": "^6.23.0",
        "babel-preset-env": "^1.7.0",
        "babel-preset-stage-0": "^6.24.1",
        "css-loader": "^3.2.0",
        "file-loader": "^4.2.0",
        "html-webpack-plugin": "^3.2.0",
        "postcss-loader": "^3.0.0",
        "sass-loader": "^8.0.0",
        "style-loader": "^1.0.0",
        "url-loader": "^2.1.0",
        "vue-loader": "^15.7.1",
        "vue-router": "^3.1.3",
        "vue-template-compiler": "^2.6.10",
        "vuex": "^3.1.1",
        "webpack": "^4.39.3",
        "webpack-cli": "^3.3.8"
      },
      "scripts": {
        "dev2": "webpack-dev-server --open --port 3000 --contentBase src --hot",
        "dev": "webpack-dev-server",
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC"
    }

转载于:https://www.cnblogs.com/llcdbk/p/11563971.html

发表评论取消回复

表情：

评论列表（有 0 条评论，33人围观）

还没有评论，来说两句吧...

相关阅读

相关新手配置webpack打包js文件教程，以及webpack的常用配置说明

![502b43820e0fa0a1679d6dfe132178c2.png][]最近在搞chrome插件开发，想使用webpack打包js文件，因为不用webpack打包的话

绝地灬酷狼/ 2023年10月09日 18:31/ 0 赞/ 10 阅读

相关 Webpack--devServer的常用配置

原文网址：[Webpack--devServer的常用配置\_IT利刃出鞘的博客-CSDN博客][Webpack--devServer_IT_-CSDN] 简介说明

ゞ浴缸里的玫瑰/ 2023年09月29日 17:06/ 0 赞/ 28 阅读

相关 webpack 常用配置

webpack.config.js const path = require('path'); const webpack = require('webpac

﹏ヽ暗。殇╰゛Y/ 2023年08月17日 17:24/ 0 赞/ 34 阅读

相关 webpack 常用配置项

const path = require('path'); moudule.exports = { // entry 表示入口webpack

雨点打透心脏的1/2处/ 2023年05月30日 10:51/ 0 赞/ 36 阅读

相关 webpack配置

1、初始化package.json文件 npm init -y 2、处理ES6语法安装：npm i babel-loader babel-core ba

淩亂°似流年/ 2022年06月13日 01:29/ 0 赞/ 272 阅读

相关 webpack配置

var path = require(‘path’); var MiniTextPlugin = require(‘mini-css-extract-plugin’);

快来打我*/ 2022年05月11日 09:30/ 0 赞/ 246 阅读

相关 webpack 介绍 & 安装 & 常用命令

转自：http://www.cnblogs.com/sloong/p/5584684.html 只可参考，不可商用 Webpack是一款用户打包前端模块的工具，它将根据模块

妖狐艹你老母/ 2021年09月14日 14:00/ 0 赞/ 429 阅读

相关 webpack常用loader和plugin

webpack常用loader和plugin file-loader file-loader: 生成依赖的文件到输出目录，然后将模块文件设置为：导出一个路径\\

Myth丶恋晨/ 2021年09月09日 04:44/ 0 赞/ 380 阅读

相关 webpack配置

1.新建文件夹 webpack-demo vscode 打开文件 -》打开控制台（只要进入文件目录中） 2.初始化webpack webpack init -

小灰灰/ 2021年08月27日 22:56/ 0 赞/ 485 阅读

相关 webpack4 常用插件

1、copy-webpack-plugin拷贝文件 (1)下载 cnpm install copy-webpack-plugin --save-dev

﹏ヽ暗。殇╰゛Y/ 2021年07月24日 22:27/ 0 赞/ 515 阅读