webpack入门配置(图文附源码)

最新推荐文章于 2024-07-23 16:39:39 发布
最新推荐文章于 2024-07-23 16:39:39 发布
阅读量298 收藏 1
点赞数
分类专栏： webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tengjiku/article/details/83027359
版权

源码：进阶版：https://gitee.com/Moruin/moruin-study

1.1、创建package.json文件

执行命令：

npm init

如下图：

执行完后在项目下会出现package.json文件

1.2、安装webpack

//全局安装

npm install -g webpack

//安装到你的项目目录

npm install --save-dev webpack

这里安装到项目目录，如下图：

执行完后，会在目录生成node_modules文件夹，package-lock.json文件

1.3、配置webpack.config.js文件

在项目根目录新建webpack.config.js文件，并输入以下代码配置：

const path = require('path');

module.exports = {

entry: './src/index.js',//需要解析的js文件名

output: { filename: 'index.js',//解析完的文件名

path: path.resolve(__dirname, 'dist') }

};

1.4、创建存放文件的文件夹

在项目目录下新建src文件夹，里面新建index.js文件，输入以下代码测试：

console.log("hello world!")

然后在cmd输入

node_modules\.bin\webpack

如下图就是打包成功了！

1.5、HtmlWebpackPlugin安装与配置

本插件是用于自动生成html文件

cmd输入下列代码安装：

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

如下图：

配置webpack.config.js文件：

var HtmlWebpackPlugin = require('html-webpack-plugin');//新增

var path = require('path'); module.exports = {

entry: './src/index.js',//需要解析的js文件名

output: { filename: 'index.js',//解析完的文件名

path: path.resolve(__dirname, 'dist')

},

plugins: [new HtmlWebpackPlugin()]//新增

};

配置好后，再运行node_modules\.bin\webpack打包一下，会发现dist文件夹里多了index.html文件，并且自动导入了index.js文件

1.6、babel-loader安装与配置

首先安装babel-loader：

npm install --save-dev babel-loader@7.1.2 babel-core@6.26.0 babel-preset-env@1.6.1

如下图：

然后修改配置文件webpack.config.js:

const path = require('path');

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

entry: './src/index.js',

output: {

filename: 'index.js',

path: path.resolve(__dirname, 'dist')

},//新增

module: {

rules: [

{

test: /\.m?js$/,

exclude: /(node_modules)/,

use: {

loader: 'babel-loader',

options: {

presets: ['env']

}

}

}

]

},

plugins: [new HtmlWebpackPlugin()] };

配置好了之后，修改Index.js文件，使用ES6语法：

然后执行打包，查看是否成功：

1.7、react安装与配置

安装命令与babel类似：

npm install --save-dev babel-preset-react@6.24.1

npm install react@16.2.0 react-dom@16.2.0

如下图：

修改配置文件：

const path = require('path');

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

entry: './src/index.js',

output: {

filename: 'index.js',

path: path.resolve(__dirname, 'dist') },

module: {

rules: [{

test: /\.m?js$/,

exclude: /(node_modules)/,

use: {

loader: 'babel-loader',

options: { presets: ['env', 'react'] }

}

}

] },

plugins: [

//处理html文件，使用模板

new HtmlWebpackPlugin({ template: './src/index.html' })

] };

这里template属性是使用src目录下的index.html文件当做模板来转换

配置好后，编写index.js，使用react：

import React from 'react';

import ReactDOM from 'react-dom';

ReactDOM.render(

<h1>Hello mybro!</h1>,

document.getElementById('app')

);

写好后打包，然后打开dist文件夹下的index.html文件查看效果：

1.8、加载css，css-loader安装与配置

命令安装：

npm install --save-dev style-loader@0.19.1 css-loader@0.28.8

如下图：

修改配置文件：

const path = require('path');

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

entry: './src/index.js',

output: { filename: 'index.js', path: path.resolve(__dirname, 'dist') },

module: {

rules: [ //js文件 { test: /\.m?js$/, exclude: /(node_modules)/,

use: {

loader: 'babel-loader',

options: { presets: ['env', 'react'] }

}

},

//css文件

{ test: /\.css$/, use: ['style-loader', 'css-loader'] }

] },

plugins: [

//处理html文件，使用模板

new HtmlWebpackPlugin({ template: './src/index.html' })

] };

src目录下新建index.css，并编写样式：

index.js文件引入css文件：

import './index.js';

最后打包，刷新页面查看效果：

注意：这里的css文件编译可以在dist目录下的index.js文件里看到，是很长的一段，所以为了方便，我们需要把css文件独立出来，以便查看并减少渲染时间。

1.9、独立css文件，ExtractTextWebpackPlugin安装

安装命令：

npm install --save-dev extract-text-webpack-plugin@3.0.2

如下图：

修改配置文件：

const path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { entry: './src/index.js', output: { filename: 'index.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ //引入js文件 { test: /\.m?js$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: ['env', 'react'] } } }, //引入css文件 { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) } ] }, plugins: [ //处理html文件，使用模板 new HtmlWebpackPlugin({ template: './src/index.html' }), //处理css文件 new ExtractTextPlugin("index.css"), ] };

修改好后打包，可以看到dist目录下多出了index.css文件，并且页面效果依然。

1.10、图片文件处理

安装file-loader，url-loader：

npm install --save-dev file-loader@1.1.6 url-loader@0.6.2

如下图：

修改配置文件：

const path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { entry: './src/index.js', output: { filename: 'index.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ //引入js文件 { test: /\.m?js$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: ['env', 'react'] } } }, //引入css文件 { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) }, //图片处理 { test: /\.(png|jpg|gif)$/i, use: [{ loader: 'url-loader', options: { limit: 8192 } }] } ] }, plugins: [ //处理html文件，使用模板 new HtmlWebpackPlugin({ template: './src/index.html' }), //处理css文件 new ExtractTextPlugin("index.css"), ] };

然后引入图片：

ok，打包，刷新页面：

1.11、独立公共文件

不需要安装，直接修改配置文件：

const path = require('path'); const webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { entry: './src/index.js', output: { filename: 'js/index.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ //引入js文件 { test: /\.m?js$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: ['env', 'react'] } } }, //引入css文件 { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) }, //图片处理 { test: /\.(png|jpg|gif)$/i, use: [{ loader: 'url-loader', options: { limit: 8192, name: 'resource/[name].[ext]' } }] } ] }, plugins: [ //处理html文件，使用模板 new HtmlWebpackPlugin({ template: './src/index.html' }), //处理css文件 new ExtractTextPlugin("css/[name].css"), //独立公共组件 new webpack.optimize.CommonsChunkPlugin({ name: 'common', filename: 'js/base.js' }) ] };

修改好了之后，删掉dist文件夹，重新打包后，dist目录结构就比较清晰：

1.12、webpack-dev-server自动刷新配置

安装命令：

npm install --save-dev webpack-dev-server@2.9.7

如下图：

修改配置文件：

const path = require('path'); const webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), publicPath: '/dist/', filename: 'js/index.js' }, module: { rules: [ //引入js文件 { test: /\.m?js$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: ['env', 'react'] } } }, //引入css文件 { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) }, //图片处理 { test: /\.(png|jpg|gif)$/i, use: [{ loader: 'url-loader', options: { limit: 8192, name: 'resource/[name].[ext]' } }] } ] }, plugins: [ //处理html文件，使用模板 new HtmlWebpackPlugin({ template: './src/index.html' }), //处理css文件 new ExtractTextPlugin("css/[name].css"), //独立公共组件 new webpack.optimize.CommonsChunkPlugin({ name: 'common', filename: 'js/base.js' }) ], devServer: { //默认是8080端口，为了避免冲突修改一下 port: 8095 } };

然后不需要执行打包，执行新的命令：

node_modules\.bin\webpack-dev-server

如下图：

到此自动刷新就完成了，修改js文件查看实时修改效果。

最后修改package.json文件：

这样修改之后，我们可以直接执行一条短的命令就可以自动打包了：

npm run dev

如图：

打包就变成了：

npm run dev

如图：

 

 

好人一生平安！

Moruin
关注
专栏目录
webpack入门和实战(一)--webpack配置及技巧
PYPMY的博客
07-06 358
一、全面理解webpack 1、什么是 webpack？ webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理,它能有Grunt或Gulp所有基本功能。webpack的官网是 https://webpack.github.io/ ，文档地址是https://webpack.github.io/docs，官网对webpack的定义是MODULE BUNDLER，他的目的就是把有依赖关...
【webpack】从零开始配置webpack系列(基础篇)_webpack
2401_84181286的博客
04-30 579
指示 Webpack 从哪个文件开始打包指示 Webpack 打包完的文件输出到哪里去，如何命名等webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析扩展 Webpack 的功能。
2-2-5webpack源码
我不信走不到天明
04-13 232
1.内容概述 1.webpack打包流程拆分不同的环节 2.做了什么工作 3.如何完成的 4.使用了什么技术 5.模块的加载和loader的使用 6.webpack的配置演示 2.打包后源码分析 path: path.resolve(‘dist’) 输出目录的路径 对输出文件进行分析 1.我们称之为模块定义 “./src/index.js”: 路径模块id 视为键值对 (function (module, exports) { console.log(‘index.js内容’) module.exp
webpack的基本介绍与使用
最新发布
qq_45799465的博客
07-23 1624
Webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
webpack源码
woyebuzhidao321的博客
07-03 639
一、打包后文件分析 /** * 01 打包后的文件就是一个函数自调用，当前函数调用时传入一个对象 * 02 这个对象我们为了方便将之称为是模块定义，它就是一个键值对 * 03 这个键名就是当前被加载模块的文件名与某个目录的拼接（） * 04 这个键值就是一个函数，和 node.js 里的模块加载有一些类似，会将被加载模块中的内容包裹于一个函数中 * 05 这个函数在将来某个时间点上会被调用，同时会接收到一定的参数，利用这些参数就可以实现模块的加载操作 * * 06 针对于上述的代码就相当于是
webpack的常用配置
fwk19840301的博客
02-07 3567
webpack 中文文档 webpack.dev /* 1.该文件是webpack的配置文件，所有webpack的任务、用到的loader、plugins都要配置在这里 2.该文件要符合CJS模块化规范 */ //引入Node中一个内置的path模块，专门用于解决路径问题 const {resolve} = require('path'); //引入html-webpack-plugin，用于加工html文件 const HtmlWebpackPlugin = require('html-w.
MAC电脑----webpack新手入门项目--图文教程
高级软件开发工程师--周玉的博客
07-11 7874
1.安装依赖webpack项目依赖npm和nodejsbrew install npm npm install node检查版本npm -v node -v2.安装webpack1.全局安装:具体位置如下图npm install webpack -g2.局部安装:当前项目中安装,比如桌面有个webpack文件夹#打开终端--切换到当前项目文件夹 cd desktop/webpack #初始化,产生p
webpack+vue.js+elementUI试做后台管理页面
热门推荐
OverrideRe的博客
07-11 2万+
前言由于上次搭好了SSM后端框架，就想着顺便把以前那个博客网站的后台管理系统给做了，系统的后端环境是有了，前端页面用什么开发呢？之前简单的看了vue.js，所以就决定用vue.js做前端页面，然后搜了一些vue.js配套的ui，找到了elementUI。而在看vue.js的时候看到上面说了npm安装，于是就想起了这个，就想知道这是什么，于是各种Google，差不多了解了现在的前端开发是什么样的了。感
React16.4开发简书项目 从零基础入门到实战-笔记-01
mysteryflower的专栏
04-22 1572
第1章 课程导学 对课程整体进行讲解。 1-1 课程导学试看 第2章 基础知识 React API 一览 React主要API介绍，在这里你能了解它的用法，为下一章源码分析打基础。 2-1 准备工作试看 2-2 JSX到JavaScript的转换 2-3 react-element 2-4 react-component 2-5 react...
微信小程序开发导航：精品教程+网友观点+demo源码（5月9日更新）
u012421719的博客
10-24 1万+
本文长期更新
使用vue开发APICloud软件APP的教程
cuicuiniu521的博客
07-28 1490
如何自定义loader登录APICloud的官网，到达控制台，选择添加模块（可以添加h5不能实现的功能模块），点击模块下的自定义loader，点击编译xxx自定义loader。将自定的loader下载到手机端，安装后打开，如果遇到问题，可能是需要打开此app的存储，照相的权限。...
webpack常用配置总览(小结)
10-15
主要介绍了webpack常用配置总览(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
webpack 常用配置
weixin_51369544的博客
09-09 2487
环境搭建 既然是前端项目，那么就npm就必不可少 运行 npm install webpack-cli -g 来全局安装脚手架 随后使用 npm install webpack-cli -D 安装到工程下 在工程目录下创建 webpack.config.js （文件名固定） 来作为webpack的配置文件，所有有关webpack的配置都写在此文件中，其中的内容通过es5语法暴露出去 五个核心配置 webpack 五个核心配置是 entry 入口文件 output 输出 mo
webpack常用配置
flower886的博客
08-08 285
loader 就是将各种类型的文件转换成 webpack 能够处理的模块，一个实际开发中经常接触到的例子：项目中使用了 less 语法，就需要使用 less-loader 去将其转译为 css，然后通过 css-loader 去加载 css 文件，处理后交给 style-loader，最后把资源路径写入到 html 中的 style 标签内生效。: loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务,例如打包优化，资源管理等。: 指引webpack将打包好的文件放到哪里。
webpack入门与配置解析
"Learning webpack step by step" 这个资源是一个逐步学习webpack的教程，主要讲解了现代前端开发中使用webpack的重要...通过这个教程，开发者可以深入理解webpack的工作原理和配置，从而更有效地管理和优化前端项目。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值