Webpack基本使用
Webpack介绍:主要用于web项目中打包资源进行自动构建,Webpack将所有资源视为JS的模块来进行构建，所以对于CSS，Image等非JS类型的文件，Webpack会使用相应的加载(loader)器来加载成其可识别的JS模块资源,通过配置一些信息，就能将资源进行打包构建，更好地实现前端的工程化
Webpack安装
本地安装:
npm install -D webpack
-D 实际上是简写 --dev-save如果你使用Webpack 4+ 版本, 你还需要安装CLI.
npm install -D webpack-cli要安装特定版本
npm install -D webpack@<version>全局安装:
npm install -g webpack配置项简介：
- Entry，入口文件配置,Webpack执行构建的第一步将从entry开始,完成整个工程的打包
- Module，模块,在Webpack里,一切皆模块,Webpack会从配置的entry开始递归找出所有依赖的模块,最常用的是rules配置项,功能是匹配对应的后缀,从而针对代码文件完成格式转换和压缩合并等指定的操作.
- Loader，模块转换器,用于把模块原内容按照需求转换成新内容,这个是配合Module模块中的rules中的配置项来使用.
- Plugins，扩展插件,在Webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要做的事情.(插件API)
- Output，输出结果,在Webpack经过一系列处理并得出最终想要的代码后输出结果,配置项用于指定输出文件夹,默认是./dist
基本使用
把src的代码编译到dist目录中
project
handle
|- package.json
|- webpack.config.js
|- index.html
|- /src
|- index.js
|- mixin.js
|- /dist
|- bundle.jssrc/index.js
import content from "./mixin";
document.body.appendChild(content("webpack"));src/mixin.js
module.exports = function (con) {
var element = document.createElement('div');
element.innerHTML = 'Hello, ' + con;
return element;
}index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>起步</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>.npmrc
registry=https://registry.npm.taobao.orgwebpack.config.js
const path = require('path');
module.exports = {
// 打包的入口点
entry: './src/index.js',
// 打包的输出点
output: {
// 打包之后输出文件的名称
filename: 'bundle.js',
// 打包之后输出文件的路径
path: path.resolve(__dirname, 'dist')
}
}总结
webpack 的基本使用方式 :
- 配置package.json的start命令为webpack
- 创建webpack.config.js
- 指定项目打包的入口
- 指定项目打包后文件的名称和输出路径
配置代码错误源
如果报错了，是这样子的：
image
我们需要知道代码的具体错误,如图：
image
修改配置文件：
webpack.config.js
devtool: 'inline-source-map',
<!--去掉警告提示-->
mode: 'none'
image
webpack加载CSS
下载包
npm install -D style-loader css-loader引入资源
src/js/index.js
// 引入css
import '../css/main.css'修改配置文件
webpack.config.js
module: {
rules: [
// 加载css
{
// 找到css文件()
test: /\.css$/,
// 需要转换器(需要什么转换器 都是大家都知道的 style-loader css-loader)
use: ['style-loader', 'css-loader']
},
]
}webpack加载图片
下载包
npm install -D file-loader引入资源
src/js/index.js
// 引入图片
const imgSrc = require('../image/chrome.png');修改配置文件
webpack.config.js
rules: [
{
test: /\.(png|jpe?g|gif|svg)$/,
use: ['file-loader']
}
]webpack加载字体
- 下载字体
- 定义字体 @font-face { font-family: 'wanlum'; src: url("../fonts/Raleway.ttf"); }
- 使用字体 div { font-family: 'wanlum'; color: red; font-size: 30px; }
- 配置webpack.config.js { test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ 'file-loader' ] }
webpack编译ES6
- 下载包 npm install -D babel-cli babel-preset-env babel-loader
- 编辑配置文件 .babelrc { "presets": [ "env" ] }
- 配置webpack.config.js { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } }
less编译成css
- 下载包 npm install less-loader less -D
- 配置webpack.config.js { test: /\.less$/, use: ['style-loader','css-loader', 'less-loader'] },
html自动生成
- 下载包 npm install -D html-webpack-plugin clean-webpack-plugin
- 引入包 // 重新生成html的 const HtmlWebpackPlugin = require('html-webpack-plugin'); // 清理dist目录 const CleanWebpackPlugin = require('clean-webpack-plugin');
- 配置webpack.config.js plugins: [ new HtmlWebpackPlugin({ title: "你好" }), // 清理dist目录 new CleanWebpackPlugin(['dist']) ],
自动编译实时加载
- 下载包 npm install -D webpack-dev-server
- 配置webpack.config.js devServer: { contentBase: './dist' }
- 配置package.json启动项
"start": "webpack-dev-server --config webpack.config.js" 热替换(跟自动编译实时加载功能差不多)
- 配置webpack.config.js
plugins: [
new HtmlWebpackPlugin({
title: '使用HtmlWebpackPlugin'
}),
new webpack.NamedModulesPlugin(['dist']),
new webpack.HotModuleReplacementPlugin(['dist'])
],
devServer: {
contentBase: path.resolve(__dirname,'dist'),
hot: true
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018/07/02，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录