用webpack搭建项目基础配置

1、新建一个项目文件夹
快速初始化项目 npm init -y，。
注意：输入npm init -y初始化项目，-y可以让你省略去不停的yes

2、创建文件层级结构
创建一个src和dist文件夹，src放项目源码，dist放webpack打包后的文件。
main.js 是入口文件
在这里插入图片描述

3、引入依赖

注意：-S 安装到上线环境，-D 安装到开发环境

【注】页面中引入过多的静态文件会导致网页加载速度慢，所以我们在入口文件main.js中可以使用es6或者node方法引入jquery。

页面中引入jquery需要用script标签，那么js中如何引入jquery呢 ?

(1) 初始化项目,下载依赖包

npm i jquery -S

(2) js中引入jquery

import $ from jquery;

但是浏览器不识别import，所以需要webpack将浏览器不能识别的文件转化为可以识别的文件。

4、安装webpack

使用 cnpm 安装 webpack ，运行cnpm i webpack webpack-cli -D

在终端运行webpack（运行wepack和运行node原理相同，运行node进入node环境，同理当前进入webpack环境，webpack命令就是webpack-cli提供的），此时报错，提示未设置mode选项。
在这里插入图片描述

5、建立webpack配置文件
在项目根目录下新建webpack.config.js文件（注意它是一个js文件），当运行webpack的时候，会自动去项目根目录寻找并执行webpack.config.js文件

//向外暴露一个打包的配置项
module.exports ={
    mode:'development'
};

注意：是 exports ，不是 export
此时运行webpack仍旧报错，
在这里插入图片描述
我们src文件夹下有index.js文件，为什么还报错呢？
因为在 webpack 4.x 中，有一个很大的特性，默认的打包入口路径是 src -> index.js，所以可将main.js改为index.js 或者单独配置入口文件。

const path = require('path'); //核心模块

module.exports = {
    mode: 'development',
    entry: './src/main.js',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'main.js'
    }
};

此时再运行webpack进行打包，dist文件夹中自动生成了main.js
将dist文件夹下的main.js 引入 index.html中即可。
但是没修改一次src/main.js 都要重新webpack打包，很麻烦，所以接下来要配置实时打包编译
在这里插入图片描述

6、配置实时打包编译

cnpm i webpack-dev-server -D

webpack在全局安装了，所以可以在终端直接输入webpack启动。
但是webpack-dev-server并没有只安装在项目本地，所以不能直接输入webpack-dev-server启动，借助快速命令 npm run dev

直接在终端启动服务器命令 webpack-dev-server
或者在 package.json 中配置

第一种写法：

"dev": "webpack-dev-server --open --port 3000 --contentBase src"

--open 运行后自动打开
--port 3000 更改端口号
--contentBase src 打开src根目录下的文件

第二种写法：

"dev": "webpack-dev-server"

在 webpack.config.js 中

module.exports = {
    devServer: {
        open: true,
        port: 5000,
        contentBase: 'src',
    },
};

然后 npm run dev，将会实时监听变化

注：实时监听变化编译后的文件，并不是dist/main.js

7、文件编译到了哪里？

当前相当于启动了一个小型服务器
在这里插入图片描述

//当前项目运行在8080端口
Project is running at http://localhost:8080/  
//项目托管于根路径下
//相当于输入http://localhost:8080/main.js 能看到src/main.js编译后的文件
webpack output is served from /

此时的http://localhost:8080/main.js才是实时编译后的文件，这个文件不是dist/main.js

为什么这个文件存在，但是确在localhost中看不到呢？
因为 webpack-dev-server将打包好的main.js托管到了内存中，所以在项目根目录中看不到。

为什么要放到内存中呢？
因为放到内存中快，如果将main.js放到磁盘上，每保存一次就要访问一次磁盘，对磁盘损失很大
所以把html也要托管于内存中去

8、把html托管于内存中

npm i html-webpack-plugin -D

修改webpack.config.js

const path = require('path'); //核心模块
const HtmlWebPackPlugin = require('html-webpack-plugin');// 导入 在内存中自动生成 index 页面的插件

const htmlPlugin = new HtmlWebPackPlugin({
    //_dirname 代表当前文件所处目录，
    template: path.join(__dirname, './src/index.html'), //源文件
    filename: 'index.html'   // 生成的内存中首页的名称
});

module.exports = {
   // plugin是用于扩展webpack的功能，各种各样的plugin几乎可以让webpack做任何与构建先关的事情。
   // plugin的配置很简单，plugins配置项接收一个数组，数组里的每一项都是一个要使用的plugin的实例，plugin需要的参数通过构造函数传入。
    plugins: [htmlPlugin]
};

重新运行项目，直接打开页面，证明html已托管于内存中直接打开index.html了
在这里插入图片描述
审查源码，html-webpack-plugin自动将js注入到html中了

9、处理css、less后缀名的文件

webpack只能打包处理js文件，如果处理css文件，需要其他loader

cnpm i style-loader css-loader -D
cnpm i less less-loader -D

import './css/index.css'

module.exports = {
  module: {
     rules: [
       //style-loader: 将css插入到页面的style标签
       {test: /\.css$/, use: ['style-loader', 'css-loader']},
       // less处理成css，交给css-loader
       {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}
     ]
  }
}

webpack处理第三方文件的过程：
发现处理的不是js文件，就去配置文件中，查找有无第三方匹配规则，如果能找到对应规则，则调用对应的loader规则。调用的时候，是从后向前调用。当最后一个loader调用完毕，则将结果交给webpack打包合并，最终输出到index.js

注意：
1、webpack是基于node构建的，node可以使用的语法webpack都可以使用。
所以使用module.exports暴露，这是node语法，而不能使用export default，这是es6语法。

2、每次修改package.json 文件都要重新启动项目

闷骚的小猪

发布了39 篇原创文章 · 获赞 2 · 访问量 4050

私信关注

用webpack搭建项目基础配置

猜你喜欢