用webpack搭建的第一个项目(详细步骤)

1. 入口和出口

1.1 创建一个文件夹
1.2 针对项目而言

先npm init初始化项目

然后安装webpack和webpack脚手架的插件

 npm init -y
 npm install --save-dev webpack
 npm install --save-dev webpack-cli
1.3 测试一些操作

项目中新建一个src目录 里面放一个index.js里面的内容随便写

在package.json中配置scripts中加入

"scripts": {
  "build": "webpack --mode production",
  "test": "echo \"Error: no test specified\" && exit 1"
},

production 可以换成 development

生产模式(线上要压缩处理)和开发模式(本地随便写)

写完以后启动 运行 npm run build 就会发现项目中多出一个dist文件 里面有一个main.js (其中之保留了index.js中输出的结果)

1.4 配置webpack并导出

上面的1.3是根据默认的来生成,这一步自己配置入口和出口后按指定格式生成

在项目中新建一个webpack.config.js文件

var path = require("path"); //引入path模块
module.exports = {
  entry: "./src/index.js", //入口文件 可以修改
  output: {
    path: path.resolve(__dirname, "dist"),  //设置路径
    filename: "lx.js"   //设置文件名
  }
}
//会发现出现一个dist文件夹,里面包含了从index.js入口打包为lx.js的文件


//也可以多入口   入口需要变成变成对象写法
entry: {
  home: "./src/index.js",
  leosn: "./src/leson.js"
},
//也可以配置出口进行hash混淆 指定hash长度  hash:8 就表示长度为8
output: {
  path: path.resolve(__dirname, "dist"),
  filename: "[name].[hash:8].js" 
}
//更可以根据模块生成不一样的hash  使用chunkHash代替hash
//然后跟目录下会出现一个build文件夹,里面包含了一个index.b330dc4b.js和main.b330dc4b.js , 分别打包了src中的 index.js 和main.js

//也可以指定webpack.congfig.js的位置 可以修改
"build": "webpack --mode production --config scripts/webpack.config.js"

2. webpack中js的处理

2.1 js自动更新插件 html-webpack-plugin

根目录下新建一个public文件夹,里面加入index.html,写入相关内容

现在希望可以把js文件引入到index.html中,下载一个插件

可以将指定的模板页面和指定的js引入生成到指定地方中去 (针对页面的webpack插件)

npm install  html-webpack-plugin --save-dev
2.2 在webpack.config.js中引入并配置
var HtmlWebpackPlugin = require("html-webpack-plugin");//引入

//配置插件
plugins: [
  new HtmlWebpackPlugin({
    title: "webpack",
    template: "public/index.html", //插入到指定的页面中
    chunks: ['main'] //指定的js文件
  }),
]

然后 npm run build 会发现 build 目录中多了一个 index.html 模版, 并且会发现里面被插入了我们自己指定的main.js引入

3. webpack中css的处理

3.1 css插件

  1. src中建一个css文件夹后新建文件 index.css 里面随便写点样式

  2. 在index.js中引入index.css ( import "./css/index.css" ) -> 此时如果允许会报错(因为正常的js文件中无法引入css文件) -> 所以需要配置相关插件

  3. 引入css-loader

npm install css-loader 
npm install style-loader
  1. webpack.config.js配置中添加
module: {
  rules: [
    { //使用style-loader和css-loader处理.css文件的规则
      test: /\.css$/i, 
      use: ['style-loader', 'css-loader'],
    },
  ],
}

然后运行 npm run build 就不会出现报错, 并且css样式被成功引入且可以改变页面元素的样式

但是css的引入会在js中 需要分离 才符合正常的阅读习惯

3.2 css分离插件安装
 npm install mini-css-extract-plugin

引入 -> 配置 -> 修改css配置

var MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 在 plugins: 中
new HtmlWebpackPlugin({
  title: 'webpacktitle',
  template: "public/index.html",
  chunks: ['main']
}),
new MiniCssExtractPlugin({
  filename: '[name].[hash].css'
})

//添加rule规则
rules: [{
  test: /\.css$/i,
  use: [MiniCssExtractPlugin.loader, 'css-loader']
}, ]

配置完成后会发现 index.html中被插入了的样式,实现了从js中分离出css

4. webpack启动服务

4.1 启动服务

安装插件启动服务

 npm install webpack-dev-server
 //基于express的服务器

在package.json中添加

"scripts": {
  "serve": "webpack serve --mode production",
  "test": "echo \"Error: no test specified\" && exit 1"
},

启动命名 npm run serve 就可以启动启动服务

4.2 自定义端口

在配置中加入

devServer: {
  static: {
    directory: path.join(__dirname, 'public'),
  },
  port: 8081,
  open: true
},

5. 在webpack中使用scss

安装

npm  i  sass  sass-loader

配置: 配置中加入 sass 重新编译就可以了(loader中加入)

// 在model{rule[..,加入..]}
{
  test: /\.s[ac]ss$/i,
    use: [
      MiniCssExtractPlugin.loader,
      'css-loader',
      'sass-loader',
    ],
},

将scss在指定的js文件中import

6. 图片处理

(webpack5 以后就不用处理图片了)

官方文档 https://webpack.js.org/loaders/url-loader/#root

安装使用

npm install file-loader

rules中添加配置

  {
    test: /\.(png|jpe?g|gif)$/i,
    use: [
      {
        loader: 'file-loader',
        options: {
          name(resourcePath, resourceQuery) {
            // `resourcePath` - `/absolute/path/to/file.js`
            // `resourceQuery` - `?foo=bar`
            if (process.env.NODE_ENV === 'development') {
              return '[path][name].[ext]';
            }
            return '[contenthash].[ext]';
          },
        },
      },
 		],

7. es6转es5

安装转换插件

npm install --save-dev babel-loader @babel/core @babel/preset-env

在rules中配置

{
  test: /\.js$/,
    exclude: /node_modules/, // 排除的目录
      // 使用babel-loader将ES6代码转为ES5，做浏览器兼容
      // 同时需要建立.babelrc文件，调用@babel/preset-env插件将E6转为E5S
      loader: "babel-loader"
}

新建一个.babelrc的文件(根目录) 里面写入 (指定转换的版本)

{
   "presets": ["@babel/preset-env"] //转为es5
}

8. 安装vue

前面一些随便写的数据都可以删掉了,现在开始进入vue的相关操作

8.1 安装vue插件
npm  i  vue@2.6 //别掉了版本号@2.6否则默认为3
8.2 在main.js中引入vue
import Vue  from "vue";
new  Vue({
    el:"#app",
    data:{
        username:"xx"
    }
})

页面中可以直接使用
  <div id="app">
        {{username}}
    </div>

运行之后会发现出现报错或者不报错但页面没有出现东西

原因: main引入的vue的路径 不对 不是一个相对路径 需要引入node_modules中的vue的安装目录 (默认引入的是ts的,而我们需要的是dist目录下的)

8.3 配置vue的路径
// 设置模块如何被解析
resolve: {
  // 当安装vue时，默认使用的是runtime-only版本，此版本只含有vue运行的代码，不包含编译template的代码
  // 需要重新更换含有runtime-compiler的版本，因为runtime-complier含有complier代码可以用于编译template
  // alias（别名）: 用别名代替前面的路径，不是省略，而是用别名代替前面的长路径
  // 如下，当main.js中import Vue from "vue"时，因为vue是别名，所以实际为import Vue from "vue/dist/vue.esm.js"
  // 别名好处是webpack直接会去别名对应的目录去查找模块，减少了webpack自己去按目录查找模块的时间
  alias: {
    'vue$': 'vue/dist/vue.esm.js'
  }
}

9. 配置项目的.vue文件

现在开始正式进入vue的相关文件配置

9.1 安装用来识别.vue的文件

.vue文件引入到.js中同样不会成功

安装识别.vue的文件

npm i vue-loader@15 vue-template-compiler
9.2 webpack.config.js引入和配置
//引入
const VueLoaderPlugin = require('vue-loader/lib/plugin');

//在glugins插件的配置中加入
new VueLoaderPlugin()

//规则relus中加入
{
  test:/\.vue$/,
  use:["vue-loader"]
}
9.3 vue使用
  1. src中新建 App.vue -> 并写入相关数据
  2. 在main.js中import并使用vue ->
import Vue from "vue";
import App from "./App.vue"
new Vue({
    render: (h) => h(App)  //h(App)函数 的作用是：使用App作为这个Vue实例的template（同时一并了注册App组件） ->  渲染到页面中
}).$mount("#app")
  1. 在public的index.html中使用
<div id="app">{{username}}</div>

10. webpack的开发环境和生产环境

https://www.cnblogs.com/jszhp/p/9453023.html

11. 配置路由vue-router

11.1 安装
npm install vue-router@3  --save
11.2 添加和配置

在src里面新建一个router的文件夹, 在里面创建一个index.js

// router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
import home from "../view/home.vue";
import about from "../view/about.vue"; //这两个是view目录下的.vue文件

Vue.use(VueRouter); //在全局注册VueRouter所有的组件
const routes = [
    {
        path: "/",
        name: "home",
        component: home
    },
    {
        path: "/about",
        name: "about",
        component: about
    }
]
const router = new VueRouter({
    mode: "hash",
    routes
});
export default router;

在src下面创建一个view目录,里面增加路由所需要的.vue

在main.js中引入相关并使用路由

import "./css/index.css"
import "./css/common.scss"
import Vue from "vue";
import App from "./App.vue"
import router from "./router/index";

new Vue({
    router,
    render: (h) => h(App)
}).$mount("#app")

在App.vue中使用路由

<template>
    <div>
        <router-link to="/">首页</router-link>
        <router-link to="/about">关于</router-link>
        <router-view />
    </div>
</template>
<script>
export default {};
</script>
<style></style>

//本次框架搭建的文档树为:
firstWebpack
├── dist
│   ├── index.html
│   ├── lx.js
│   ├── lx.js.LICENSE.txt
│   ├── main.0e6fd82f2f44839b944f.css
│   ├── main.1fa84c28225cfba7aa8a.css
│   ├── main.3039e952162804020761.css
│   ├── main.9e524eb434c3807ee6ce.css
│   ├── main.c08dca883b839ec2f086.css
│   ├── main.ccd0bcde7fe095c1e058.css
│   ├── main.d6e379202b62b2060452.css
│   ├── main.e4a733c78373488dfe29.css
│   └── main.f519b40bfbd5ecbf35ed.css
├── public
│   └── index.html
├── src
│   ├── css
│   │   ├── comom.scss
│   │   └── index.css
│   ├── router
│   │   └── index.js
│   ├── view
│   │   ├── about.vue
│   │   └── home.vue
│   ├── App.vue
│   └── main.js
├── package-lock.json
├── package.json
└── webpack.config.js
posted @   嘻嘻不是菜鸟了  阅读(511)  评论(0)  编辑  收藏  举报
相关博文：
· 面试题2022.6.27
· 面试题整理2022.6.19
· webpack教程
· 学习笔记--Webpack
· 记录--从原理分析vue开发环境搭建的全部过程
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示