webpack的搭建使用

最新推荐文章于 2023-04-08 21:14:25 发布
最新推荐文章于 2023-04-08 21:14:25 发布
阅读量160 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42628504/article/details/107749508
版权

作为一名前端开发人员，说到脚手架的搭建，en,真香,但是真的仅仅的就会脚手架吗？No
有时候坚决自己使用webpack来搭架子，所以不说废话了，特发此文，以供大家共同学习成长

一.

1;全局安装和项目安装 
1 全局安装  npm install  webpack -g (不建议使用)

2:针对项目而言  先npm init初始化项目以后

2.1 npm install --save-dev webpack
2.2 npm install --save-dev webpack-cli   (4.0以下的版本不用安装webpack-cli)

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

4:在package.json中配置script中加入
  "scripts": {
        "build": "webpack --mode production",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
  
production 可以换成development     生产模式(线上要压缩处理)和开发模式(本地随便写)

写完以后启动
 运行  npm run build   就会发现项目中多出一个dist文件 里面有一个main.js
手工配置webpack

5.在项目中新建一个一个webpack.config.js文件
//写入基本配置就可以修改 入口文件
module.exports = {
    entry: "./src/leson.js", //如果文件 可以修改
    
}

设置出口文件
var path = require("path");

module.exports = {
    entry: "./src/leson.js", //如果文件 可以修改
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "leson.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

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

二

1:安装插件html-webpack-plugin 进行页面js自动引入更新

npm install  html-webpack-plugin --save-dev 

就会将指定的模板页面和指定的js引入生成到指定地方中去

1:在webpack.config.js中引入
var HtmlWebpackPlugin = require("html-webpack-plugin");

2:配置
   plugins: [
        new HtmlWebpackPlugin({
            title: "webpack",
            template: "public/index.html",
            chunks: ['main']
        }),
    ]

3:使用
     <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>
</head>

<body>
    <div>我是模板页面</div>
</body>

结果
  <title>
        webpacktitle
    </title>
</head>

<body>
    <div>我是模板页面</div>
<script type="text/javascript" src="main.1e8b9d5e.js"></script></body>

三

1:新建文件index.css   里面随便写点样式

2:在index.js中引入index.css   (import "./index.css")

3:引入css-loader 

npm install --save-dev css-loader
npm install --save-dev  style-loader

4:配置中添加
module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  }

然后运行 npm run build

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

安装辅助 npm install --save-dev mini-css-extract-plugin

第一步引入
var MiniCssExtractPlugin = require('mini-css-extract-plugin');


第二步配置
  new HtmlWebpackPlugin({
            title: 'webpacktitle',
            template: "public/index.html",
            chunks: ['main']
        }),
        new MiniCssExtractPlugin({
            filename: '[name].[hash].css'
        })

第三步修改配置
 rules: [{
            test: /\.css$/i,
            use: [MiniCssExtractPlugin.loader, 'css-loader']
        }, ]

四

**启动服务
安装 服务
npm install webpack-dev-server --save-dev 
ps:基于express的服务器
然后在package.json中修改
  "scripts": {
        "build": "webpack --mode production",
        "dev": "webpack-dev-server --mode production",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
启动命名 npm run  dev 就可以启动启动服务
自定义端口
在配置中
 devServer: {
        contentBase: './dist',
        port: 1234,
        open: true
    }**

**

五

1:安装 
npm install sass-loader node-sass  --save-dev

2:配置中加入 sass 重新编译就可以了
{
                test: /\.s[ac]ss$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                ],
            },

六.

官方文档
https://webpack.js.org/loaders/url-loader/#root
1
安装
npm install url-loader --save-dev

2使用
rules中添加

{
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: false,
  name: '/img/[name].[hash:8].[ext]'
            },
          },
        ],
      },


3：大图片就应该使用file-loader
安装    npm install file-loader --save-dev

配置
{
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },

七

1：安装转换插件

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

2：配置 在rules中

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

3：新建一个.babelrc的文件 里面写入
{
    "presets": ["@babel/preset-env"]
  }

4：重新编译在看效果 又es6的地方都变成了es5的写法

八

1：安装vue
npm  i  vue  --save

2：在main.js中引入vue
import Vue  from "vue";

new  Vue({
    el:"#app",
    data:{
        username:"leson"
    }
})

页面处
  <div id="app">
        {{username}}
    </div>


3:编译以后运行会报错
vue.runtime.esm.js:620 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)


4:原因  main引入的vue的路径 不对  不是一个相对路径  需要引入node_modules中的vue的安装目录



5:解决 在webpack.config.js中配置正确路径即可

九

1:安装 用来识别.vue的文件

npm i vue-loader vue-template-compiler -D

2:在webpack.config.js引入
const VueLoaderPlugin = require(‘vue-loader/lib/plugin’);

插件配置中加入

 new VueLoaderPlugin() 只加入这个即可

在这里插入图片描述

new VueLoaderPlugin() 只加入这个即可
完整的如下

3:在规则relus中加入

	{
	       test:/\.vue$/,
	       use:["vue-loader"]
	}

4:新建一个App.vue文件
在这里插入图片描述

5:使用在main.js中

在这里插入图片描述

6:public的index文件夹中

在这里插入图片描述

7:打包的效果为

在这里插入图片描述

好了基本的架子是搭建起来了，后续的操作根据自己的需求哦

经年未远
关注
webpack的配置与使用
qq_45112567的博客
06-14 536
安装配置webpack 先再项目中使用npm init -y 命令初始化一个package.json文件； 新建一个名字为src文件夹，将静态资源放入该文件夹中； 运行npm install webpack webpack-cli -D 命令，安装webpack相关的包； 再项目根目录中，创建名为webpack.config.js 的webpack文件； 在webpack的配置文件中，初始化基本配置； module.exports={ mode:'development'//项目上线时需要将这个改为prod
webpack搭建
Shmily的博客
05-17 220
1、创建文件夹，文件夹的名字不能为[webpack],否则会报错 2、进入文件夹目录，在该目录下创建package.json文件 npm init -y //要输入的命令 执行完命令后，在webpackvue目录下会生成一个package.json文件 3、安装webpack相关的类包 npm install webpack webpack-cli --save-dev 上面命令可简写为： npm i webpack webpack-cli -D 说明：install === i --save-de
项目实战：webpack的搭建
F_G_Victory的博客
12-21 455
webpack是一个模块的打包工具，这里有他的官方文档， 打包工具需要的条件：一个输入的文件和输出文件， 搭建一个基础的webpack让其能运行起来只要一个entry和output即可 var path = require('path'); var webpack = require('webpack'); module.exports = { entry:'./app/
webpack搭建一个项目
qq_43427385的博客
12-30 275
1，安装与基本命令 npm install webpack-cli -g 2， 3， 4，热替换 因为我们搭建的工程化项目不是自动化的，修改一行代码必须编译，这是一件非常麻烦的一件事，我们需要自动化的编译的，这时候就需要启动服务，借助webpack-dev-server 插件 5，webpack4.0 npm install vue-cli -g vue init webpack 项目名 然...
webpack构建项目
smallMosquito的博客
03-20 847
安装webpackwebpack是基于node来构建的1 项目文件的结构  work--------  （先初始化一下npm init -y，得到package.json） dist（项目最终展示的地方） node_modules (依赖的包) src(自己文件所在地)----- css       index.css    index.less    index.scss ...
Web前端框架应用：第8章 服务器端渲染-webpack搭建及渲染框架.pptx
06-07
8.3 webpack搭建服务器端渲染;8.3 webpack搭建服务器端渲染;8.3 webpack搭建服务器端渲染;8.3 webpack搭建服务器端渲染;8.3 webpack搭建服务器端渲染;8.3 webpack搭建服务器端渲染;8.3 webpack搭建服务器端渲染;8.3 ...
webpack-vue:使用webpack搭建vue项目
05-09
使用webpack搭建vue项目 1.创建一个空项目 npm init -y 2.下载webpack，webpack-cli 目前可以使用webpack5不过还是建议使用webpack4 npm i webpack@4.44.2 webpack-cli@3.3.11 -D 3.配置webpack 1.根目录下创建...
vue2+webpack搭建h5框架
03-12
**使用Vue2和Webpack搭建H5框架的步骤：** 1. **安装依赖**：首先，需要全局安装Vue CLI（命令行工具）和Node.js环境。然后通过npm或yarn安装Vue2、Webpack及相关的依赖。 2. **初始化项目**：使用Vue CLI创建一个新...
使用webpack搭建一个vue demo
01-08
但是vue官方却十分不推荐初学者直接使用脚手架，为了更好理解vue-cli工作原理，故我们使用webpack构建一个vue demo，能够编写基本的vue代码 一.目录结构 目录结构如下： 初始化为npm项目后，创建图示文件，文件夹 ...
详解使用WebPack搭建React开发环境
01-19
安装webpack npm i webpack 安装react npm i react react-dom -s 项目基础框架 入口文件(src/index.js) import React from 'react' import {render} from 'react-dom' import App from './App' render(,...
【前端工程化】最详细的webpack基本环境搭建
qq_41852789的博客
04-07 754
首先要下载好nodejs，再执行以下步骤 第一步：创建项目文件夹：npm init -y(-y 的含义：yes的意思，在init的时候省去了敲回车的步骤，生成的默认的package.json) 第二步：npm install webpack webpack-cli -D (安装webpack并配置到开发环境，-D开发环境 -S生产环境) 第三步：新建src文件夹，然后在src里创建入口文件inde...
Vue脚手架配置webpack（configureWebpack，chainWebpack）
最新发布
coding...
04-08 9707
Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的。这个库提供了一个 webpack 原始配置的上层抽象，使其可以定义具名的 loader 规则和具名插件，并有机会在后期进入这些规则并对它们的选项进行修改。在vue.config.js文件下配置webpack，其他的就不说了，主要是configureWebpack以及chainWebpack，两个在文件内是可以同时使用的。选项提供一个对象，该对象将会被 webpack-merge 合并入最终的 webpack 配置。
webpack 安装 stylus
ii窝窝头的博客
11-01 2418
npm isntall stylus stylus-loader --save-dev   引入    &lt;style lang="stylus" rel="stylesheet/stylus"&gt;
webpack
Ma2219908547的博客
09-10 184
webpack核心概念 entry(入口) string //单入口，此时形成一个chunk，对应一个bundle文件。默认名是main entry:'./src/index.js' array 在HMR的热更新中让html生效用的最广。 //多入口，只会形成一个chunk，对应一个bundle文件。默认名main entry:['./src/index.js','./src/test.js'] object //多入口，有几个入口文件，就会生成对应chunk。名字是以键值对呈现的 key entry:
Vue Cli 中 Webpack 配置的3种写法
GeekAaron的博客
10-24 1917
很多时候，vue-cli默认的webpack配置并不能满足项目需求，比如需要解析markdown文件为页面。这时，便可以在vue.config.js中设置webpack。 参考vue-cli的官方教程，我们可以看到有2种方式可以对webpack进行修改： configureWebpack 简单配置 chainWebpack 链式操作 以使用自定义loader解析markdown文件并修改@别名...
配置webpack的自动打包功能出现以下错误以及如何解决
Britney10_21的博客
08-13 1559
在配置webpack自动打包功能的时候，会出现各种各样的错误，今天我就把我遇到的甚至是困扰我一个下午的问题暴露出来，掰开了揉碎了跟大家分享。 一、出现错误如下： 亲身实验了很多方法都不管用，其实这个问题是安装包版本的问题，很多版本之间是步兼容的，所以就难为了我们这些单纯的程序员。 二、解决方法如下： 1、删除下面这个文件夹 2、修改package.json文件中的devDependencies，这里就是我们手动修改安装包的版本，将版本修改为相互之间兼容的版本...
webpack 项目构建：（一）基本架构搭建
weixin_33874713的博客
03-04 253
注：以下教程均在 windows 环境实现，使用其他操作系统的同学实践过程可能会有些出入。 一、准备工作 安装最新的 Node.js 环境；（官网地址：https://nodejs.org/zh-cn/） 安装 cnpm 淘宝npm镜像；（在控制台执行命令：npm install -g cnpm --registry=https://r...
webpack的学习
马大哈的博客
08-31 389
webpack的使用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值