webpack(零工程构建一个前端项目)

Posted 2020-10-28 seafwg

工作流程记录：

1.初始化项目：npm init -y

2.安装webpack,vue,vue-loader

npm install webpack vue vue-loader

3.按装之后根据警告提示，安装css-loader,vue-template-conpiler依赖包。

npm install css-loader vue-template-compiler 

项目初始化基本完成。

一直遇到提示 install webpack-cli -D,即使安装了也没有用，索性直接删除了，之后可以使用。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    "build": "webpack --config webpack.config.js"
    只有在这里面写webpack他才会调用这里面的webpack,否则会调用全局的webpack,会导致很多版本不同出错
  },

4.新建webpack.config.js

const path = require("path");//nodejs中的基本包，处理路径的
module.exports = {
    entry: path.join(__dirname,"src/main.js"),//__dirname代表文件所在的目录
    output: {
        filename: "bundle.js",
        path: path.join(__dirname,"dist")
    }
}

5.新建src文件，源代码

src下新建app.vue

<template>
    <div id="text">{{text}}</div>
</template>

<script>
export default {
    data() {//数据
        return {
            text: "abc"
        };
    }
}
</script>


<style>

#text{color: red;}
</style>

src下新建main.js

import Vue from "vue";
import App from "./app.vue";//.vue文件
//分别导进来文件

//创建根文件
const root = document.creatElement("div");
document.body.appendChild(root);
new Vue({
    render: (h) => h(App)//通过它挂载到html页面中
}).$mount(root);//挂载到html页面中

6.按需要添加loader

module.exports = {
    entry: path.join(__dirname,"src/main.js"),//__dirname代表文件所在的目录
    output: {
        filename: "bundle.js",
        path: path.join(__dirname,"dist")
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: "vue-loader"
            },
            {
                test:/\.styl/,//stylus预处理
                use: [
                    "style-loader",
                    "css-loader",
                    "stylus-loader"//专门处理stylus文件，处理完成之后让css-loader处理css,扔给上一层处理，自己处理自己。比较方面，可以不用写任意的括弧，标点符号。兼容css==== npm install stylus-loader stylus
                ]
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            },
            {
                test: /\.(gif|jpg|jpeg|png|svg)$/,
                use: [
                    {
                        loader: "url-loader",//的安装依赖file-loader
                        options: {
                            limit: 1024,//如果文件小于1024就会把图片转译成base64的代码
                            name: "[name]-aa.[ext]"//指定输出的名字，[name].[ext],原来的名字.扩展名,-aa是自定义的=====之后把相应的loader安装即可。
                        }
                    }
                ]
            }
        ]
    }
}

webpack做的事情就是把不同的静态资源类型打包成一个js,在html中引用js，在html引用js即可。把零碎的js打包在一起减少http请求。使用模块依赖，这样积累，以后的项目可以复用。

7.在main.js中导入所需要的js,css,图片等模块。

import Vue from "vue";
import App from "./app.vue";//.vue文件
import "./assert/style/style.css";
import "./assert/img/123.jpg";
...