webpack踩坑记录

栏目: JavaScript · 发布时间: 7年前

内容简介：目前最的正式版本是：4.31.0，推荐使用本地安装，附上源代码webpack.config.js

webpack入门级配置（最新）

目前最的正式版本是：4.31.0，推荐使用本地安装， webpack官网-指南

1.初始化

node -v
mkdir demo
npm init -y

const path = require('path');
module.exports = {
    entry:'./src/index.js'.
    ouyput:{
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.js',
    }
}

安装 webpack-dev-server

npm i webpack-dev-server -D
 "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
npm run dev

安装html-webpack-plugin

npm install --save-dev html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins:[new HtmlWebpackPlugin({template:'./dist/index.html'})]

加载css

npm install --save-dev style-loader css-loader
module:{reules:[{test:/\.css$/,use:['style-loader','css-loader']}]}

安装babel-loader

npm install -D babel-loader @babel/core @babel/preset-env webpack

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

npm install -D @babel/plugin-transform-runtime

use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env'],
        plugins: ['@babel/plugin-transform-runtime']
      }
    }

使用vue

npm i vue -D

# const VueLoaderPlugin = require('vue-loader/lib/plugin');


# resolve:{
        alias:{
            'vue$':"vue/dist/vue.esm.js"
        }
    }

安装vue-loader

npm install -D vue-loader vue-template-compiler

+ const VueLoaderPlugin = require('vue-loader/lib/plugin');

-  rules: [
      // ... 其它规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
    
- plugins: [
    // 引入这个插件！
    new VueLoaderPlugin()
  ]

附上源代码

webpack.config.js

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.js',
    },
    plugins:[
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        
    ],
    module:{
        rules:[
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test:/\.(png|svg|ipg|gif)$/,
                use:['file-loader']
            },
            {
                test:/\.vue$/,
                loader:'vue-loader'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env'],
                    plugins: ['@babel/plugin-transform-runtime']
                  }
                }
            },
            
        ]
    },
    resolve:{
        alias:{
            'vue$':"vue/dist/vue.esm.js"
        }
    }
}

package.json

{
  "name": "mint-demo",
  "version": "1.0.0",
  "description": "\"",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "babel-loader": "^8.0.6",
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  },
  "dependencies": {
    "vue": "^2.6.10"
  }
}

index.js

import Vue from 'vue';
import App from './App.vue';
console.log('444');
var app = new Vue({
    el:'#app',
    data:{
        msg:'ccc'
    },
    render: c => c(App)
    
})

console.log('2323');

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>vue</title>
</head>
<body>
    <div id="app">
        {{msg}}
    </div>
</body>
</html>

App.vue

<template>
    <div>
        这是app.vue
    </div>
</template>
<script>
export default {
}
</script>

<style scoped>

</style>

欢迎指正哦！

参照：

webpack官网

vue官网

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Out of their Minds

Dennis Shasha、Cathy Lazere / Springer / 1998-07-02 / USD 16.00

This best-selling book is now available in an inexpensive softcover format. Imagine living during the Renaissance and being able to interview that eras greatest scientists about their inspirations, di......一起来看看《Out of their Minds》这本书的介绍吧!

码农工具

HTML 压缩/解压工具

在线压缩/解压 HTML 代码

随机密码生成器

多种字符组合密码