webpack教程(一)

准备工作

下载安装node模块,用npm
配置淘宝镜像
webpack是什么
webpack是一个js的打包工具,可以进行很多自动化的工作,比如压缩,提取公共模块,把小图片变成base64格式
webpack是怎么打包的:
- 寻找入口
- 把相关东西全部打包成一个文件(一个包),并且它会记住这些东西的位置
webpack特点
万物皆模块

相关知识

安装webpack

执行以下命令

// 全局安装webpack
npm i webpack -g
npm i webpack-cli -g
webpack -v
// 出现版本号表示安装成功

demo1 单入口文件配置

npm init 初始化package.json
创建一个文件main.js

console.log('main.js');

创建webpack的配置文件 webpack.config.js
配置webpack

// 加载node原有模块path
const path = require('path');// 导出webpack的配置module.exports = {// 配置入口entry: './main.js',// 配置输出output: {// 配置输出路径, 意思是输出到当前目录的dist文件夹path: path.resolve(__dirname, 'dist'),// 配置输出的包名filename: 'bundle.js'},// 配置环境: 开发环境和生产环境mode: 'development'
}

执行命令 webpack

多入口配置

npm init 初始化package.json
创建两个js,main1.js,main2.js

// main1.js
console.log('main1.js');
// main2.js
console.log('main2.js');

配置webpack

const path = require('path');
module.exports = {// 配置入口entry: {main1: './main1.js',main2: './main2.js'},output: {path: path.resolve(__dirname, 'dist'),// 配置输出文件名,同时添加hashfilename: 'bundle-[name]-[hash:5].js'},mode: 'development'
}

运行 webpack 命令

配置css-loader

npm init
创建app.css

body {background: gray;}

创建main.js

require('./app.css');
// 其他的代码

配置webpack,配置里用到style-loader和css-loader,需要先安装

npm i style-loader css-loader --save-dev

const path = require('path');module.exports = {entry: './main.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js'},// 配置module: {// 配置规则rules: [// 配置css相关的loader,下面的配置是告诉webpack,当在打包过程中,// 若遇到以.css结尾的文件,就用style-loader和css-loader处理一下再加载{test: /\.css$/,use: ['style-loader','css-loader']}// 配置其他的loader]}
}

运行webpack命令

安装less-loader

npm init
创建app.less

body {background: gray;.title {background: green;color: #fff;font-size: 30px;}
}

创建main.js

require('./app.less');

配置webpack

const path = require('path');module.exports = {entry: './main.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'index.js'},mode: 'development',module: {rules: [{test: /\.less$/,use: [{loader: "style-loader" // creates style nodes from JS strings}, {loader: "css-loader" // translates CSS into CommonJS}, {loader: "less-loader" // compiles Less to CSS}]}]}
}

安装less,安装style-loader,css-loader,less-loader

npm i less --save-dev
npm i style-loader css-loader less-loader --save-dev

在当前目录运行 webpack命令
检验,创建index.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div class="title">test less</div><script src="index.js" type="text/javascript" charset="utf-8"></script></body>
</html>

如果页面样式生效,说明配置是成功的.

配置server(修改了代码实时更新)

npm init
创建main.js

let div = document.createElement('div');
div.style.background = 'green';
div.style.width = '300px';
div.style.height = '300px';
document.body.appendChild(div);

配置webpack

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: './main.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'index.js'},plugins: [new htmlWebpackPlugin()]}

安装生成html插件模块

npm i html-webpack-plugin --save -dev
npm i webpack --save-dev

安装server

npm i webpack-dev-server -g  (全局安装)
npm i webpack-cli --save-dev

运行命令

webpack-dev-server --open

配置模块热更新

引入webpack

const webpack = require('webpack');

在插件处配置热更新插件

new webpack.HotModuleReplacementPlugin()

在devServer处加上

hot: true

最终的webpack配置文件为

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {entry: './main.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'index.js'},plugins: [new htmlWebpackPlugin(),// 配置热更新new webpack.HotModuleReplacementPlugin()],mode: 'development',devServer: {// 根目录contentBase: path.join(__dirname, "dist"),compress: true,// 端口号port: 9000,// 配置热更新hot: true}
}

配置快捷启动方式
在package.json的 "scripts"里面加上下面这一句

"dev": "webpack-dev-server --open --inline"

然后使用 npm run dev 开启动服务

webpack教程(一)相关推荐

[js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法
[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...
阮一峰 Webpack 教程
写在开头: 此 Webpack 教程是阮老师在 Webpack 1.x 的版本上做的.现在 Webpack 的版本已经改动较大,建议有基础的同学,就直接上官网看最新的就好了.这个教程可以用来了解下 W ...
前端工程师必须掌握—《Webpack教程》
Webpack 学习视频地址文章目录 Webpack 1.webpack基础 1.1.初始化隔行变色的案例 1.2.安装和配置webpack 1.2.1.安装webpack 1.2.2.配置webp ...
webpack 教程那些事儿05-多页应用
本篇主要关于如何用webpack构建多页应用为什么要构建多页应用呢?因为我的项目本来就是多页应用啊至于为什么要用webpack?因为我要用vue啊,嫌gulp 每次打包慢啊文章目录 1. 利用 ...
webpack教程——css的加载
首先要安装css的loader npm install css-loader style-loader --save-dev 然后在webpack.config.js中配置如下代码意思是先用css- ...
webpack教程(二)——webpack.config.js文件
首先我们需要安装一个webpack插件html-webpack-plugin,该插件的作用是帮助我们生成创建html入口文件.执行如下命令 npm install html-webpack-plugi ...
Webpack教程二
Webpack 1. watch观察模式 2. webpack-dev-server 3. webpack-dev-middleware 4. HMR 5. Vue组件支持热更新 6. 解析Resol ...
菜鸟webpack教程纠错
gei事例: http://www.runoob.com/w3cnote/webpack-tutorial.html 本次的问题主要是在loader部分,原因是按照教程的操作,会出现一下错误后来发现 ...
webpack轻松入门教程
webpack之傻瓜式教程及前端自动化入门接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpa ...

webpack教程(一)

目录

准备工作

相关知识

安装webpack

demo1 单入口文件配置

多入口配置

配置css-loader

安装less-loader

配置server(修改了代码实时更新)

webpack教程(一)相关推荐

最新文章

热门文章