Webpack手动模块搭建

作者: 微笑面对start | 来源:发表于2021-03-13 14:28 被阅读0次

Webpack手动模块搭建
Webpack自动搭建模块
轻量webpack脚手架 bicycle
使用webpack搭建简易react
webpack简单尝试
webpack从0开始手动搭建react + typeScrip
从零搭建基于Webpack4的开发环境
parcel-vue
2018-06-10 zn社笔记四
Vue脚手架

一、新建工程，在工程下创建src 存放文件，创建dist存放输出文件。

二、在src创建main.js为入口js文件，index.html为入口html文件。使用如下命令初始化，生成package.json文件。

npm init

信息介绍:

package name:                      你的项目名字叫啥
version:                          版本号
description:                       对项目的描述
entry point:                      项目的入口文件（一般你要用那个js文件作为node服务，就填写那个文件）
test command:                     项目启动的时候要用什么命令来执行脚本文件（默认为node app.js）
git repository:                    如果你要将项目上传到git中的话，那么就需要填写git的仓库地址（这里就不写地址了）
keywirds：                       项目关键字（我也不知道有啥用，所以我就不写了）
author:                         作者的名字（也就是你叫啥名字）
license:                        发行项目需要的证书（这里也就自己玩玩，就不写了）

三、安装webpack

//安装 webpack
npm install webpack -g
npm install webpack --save-dev

四、在项目根目录创建webpack.config.js文件.基础信息

const  path = require('path')
//一旦依赖node 就npm init
module.exports = {
    entry : './src/main.js', //入口文件
    output : {
        path : path.resolve(__dirname,'dist'),  //输出目录
        filename : 'bundle.js'  //输出文件名
    },
    resolve : {
    //省略后缀名
        extensions : ['.js','.css','.vue'],
        alias : {
            '@':path.join(__dirname,'./src'),//这样 @就表示根目录src这个路径
        }
    },
}

五、安装vue相关插件

 //vue 存全局
      npm install vue --save  
      //vue-loader 和 compiler存本地
      npm install vue-loader@14.1.1 --save--dev  
      npm i vue-template-compiler --save--dev
      // 有可能提示安装bable,也安装上
      npm install -D babel-loader @babel/core @babel/preset-env webpack

六、创建.vue插件文件为App.vue。写入内容

<template>
  <div >
    <p class="text">这个是第一个搭建的</p>
  </div>
</template>

<script>
export default {
name: "App"
}
</script>

<style scoped>
.text{
  color: red;
}
</style>

七、在main.js写入



// import Vue from 'vue';
import Vue from 'vue';

import App from './App.vue'

new Vue({
    el : "#app",
    components : {
        App
    },
    template : '<App />'
});

八、在index.html引入编译后的文件，和定义挂载的vue载体app

<body>

<div id="app">

</div>

<script type="text/javascript" src="./dist/bundle.js" ></script>

</body>

收尾：

安装css相关的loader

npm install --save-dev style-loader

npm install --save-dev css-loader

最终的 webpack.config.js


const  path = require('path')
//一旦依赖node 就npm init
module.exports = {
    entry : './src/main.js', //入口文件
    output : {
        path : path.resolve(__dirname,'dist'),  //输出目录
        filename : 'bundle.js'  //输出文件名
    },
    resolve : {
        //省略后缀名
        extensions : ['.js','.css','.vue'],
        alias : {
            // '@':path.join(__dirname,'./src')//这样 @就表示根目录src这个路径
            vue: 'vue/dist/vue.js',
        }
    },
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                // options:vueloaderOptions(isDev),
                // exclude:/node_modules/
            },
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
        ]
    }

}

最终的package.json

{
  "name": "day06",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode=development",
    "build": "webpack --mode=production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.13.10",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.1.2",
    "style-loader": "^2.0.0",
    "vue": "^2.6.12",
    "vue-loader": "^14.1.1",
    "webpack": "^5.25.0",
    "webpack-dev-server": "^3.11.2",
    "vue-template-compiler": "^2.6.12"
  },
  "dependencies": {
    "vue": "^2.6.12"

  }
}

最后执行命令运行