2021-08-26

最新推荐文章于 2024-09-20 11:00:29 发布

Z狂想メ曲

最新推荐文章于 2024-09-20 11:00:29 发布

阅读量98

点赞数

文章标签： node.js vue.js webpack

本文链接：https://blog.csdn.net/weixin_45448227/article/details/119939587

版权

Vue.js Webpack 配置项目搭建开发环境

关键词由CSDN通过智能技术生成

VUE、webpack4.x版本相关插件版本，测试有效
直接上代码
package.json文件

{
  "name": "vue_level6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.0"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.3.0",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.3.1",
    "@babel/runtime": "^7.3.1",
    "autoprefixer": "^9.4.6",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "node-sass": "^4.14.1",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "vue-loader": "^15.6.1",
    "vue-template-compiler": "^2.5.22",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  }
}

webpack.config.js文件


const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html'
})
// const VueLoaderPlugin = require('vue-loader/lib/plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
 
module.exports = {
    //编译模式
    mode:'development',//development production
    //__dirname代表当前文件所处的目录
    entry:path.join(__dirname,'./src/index.js'),
    output:{
        //输出文件的路径
         path:path.join(__dirname,'./dist'),
         //输出文件名
         filename:'bundle.js'
    },
    plugins :[htmlPlugin, new VueLoaderPlugin()],
    module: {
        rules: [
            {test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader']},
            {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
            {test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']},
            {test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: 'url-loader?limit=20000'},
            {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},
            {test: /\.vue$/, use: 'vue-loader'},
        ]
    }
}