webpack安装
自己简单的使用了下,先npm init 初始化了一下环境,然后安装webpack
npm init -y
npm install webpack webpack-cli --save-dev
npm init -y中-y既是yes的意思,个人感觉相当于默认配置,直接生成package.json文件。
简单的webpack配置
在package.json的同级目录下创建一个webpack.config.js文件,写入了一下内容:
'use strict'
const path = require('path')
module.exports = {
entry: {//入口
index: './src/index.js',
},
output: {//出口
path: path.join(__dirname,'dist'),
filename: 'index.js'
},
module: {//loader
rules: [
]
},
plugins: [],//插件
mode:'production'//环境
}
entry代表打包入口,output需要指定输出地址及打包出来的文件名,loader让webpack能够去处理那些非JavaScript文件(webpack 自身只理解 JavaScript),plugins代表插件入口,所有插件都在这里配置,mode指开发环境。
然后在package.json文件下的script节点添加一项配置 “build”: “webpack”,再运行 npm run build 就可以方便地打包了。
{
"name": "csdn",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
loader
loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。
解析ES6,需要用到babel-loader。
npm i @babel/core @babel/preset-env babel-loader -D
//再在根目录创建 ``.babelrc` 文件,增加以下内容
{
"presets": [
"@babel/preset-env",
]
}
接着在webpack.config.js文件module中添加
module: {
rules: [
{
test: /.js$/,
use: 'babel-loader'
},
]
}
rules集合的每个元素都是一个文件类型的配置信息:test是一个正则,用来匹配文件后缀名;use表示此loader名称。
可以使用 loader 告诉 webpack 加载 CSS 文件,或者将 TypeScript 转为 JavaScript。为此,首先安装相对应的 loader:
npm install --save-dev css-loader
npm install --save-dev ts-loader
//webpack.config.js
module.exports = {
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};
webpack加载图片
npm i url-loader -D
//webpack.config.js
{
test: /.(jpg|png|gif|jpeg)$/,
use: [{
loader:'url-loader',
options: {
limit:160000,
name: 'imgs/[name].[hash].[ext]'
}
}]
}
limit是指图片大小上限,单位是字节,如果图片大小小于这个值,就会被打包为base64格式,否则就仍是图片。
插件plugins
插件目的在于解决 loader 无法实现的其他事。
基本用法拿HtmlWebpackPlugin这个插件来模拟下,这个插件可以自动生成基本的html页面。首先安装:
npm install --save-dev html-webpack-plugin
在webpack.config.js文件中添加一个HtmlWebpackPlugin常量,引用此插件,然后在plugins节点,加上此插件实例。
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
index: './src/index.js',
},
output: {
path: path.join(__dirname,'dist'),
filename: 'index.js'
},
module: {
rules: [..]
}
plugins: [new HtmlWebpackPlugin()],
mode: 'production',
}
webpack热更新
热更新的意思就是可以在编辑器上修改代码的同时,在浏览器上看到同步更新效果。
先安装webpack-dev-server依赖
npm i webpack-dev-server -D
在package.json添加配置
{
"name": "csdn",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server --open"
},
然后在webpack.config.js中添加配置,先声明一个常量webpack
const webpack = require('webpack');
再添加一个插件到plugins节点下的数组里
new webpack.HotModuleReplacementPlugin()
最后再添加一个与plugins同级的devServer配置,其中contentBase表示此热更新打包是针对dist文件里的内容,hot:true表示开启了热更新状态。
devServer: {
contentBase: './dist',
hot: true
},
清理输出文件
清理 /dist 文件夹:在每次构建前清理 /dist 文件夹,这样我们的dist文件不会冗余。
安装clean-webpack-plugin
npm install clean-webpack-plugin --save-dev
然后在webpack.config.js中添加配置,先声明一个常量CleanWebpackPlugin
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
再添加一个插件到plugins节点下的数组里
new CleanWebpackPlugin(),
mode
mode这个配置参数用来指定当前的运行环境的,这个配置是webpack4提出来的,它有三个值:“production” | “development” | “none”,production就是生产环境,即最终部署环境;development是开发环境;none即不指定环境因素,默认是production。
补充
全局安装
-g ||- -global: 其中参数-g的含义是代表安装到全局环境里面,包安装在Node安装目录下的node_modules文件夹中,全局安装后可以供命令行(command line)使用,用户可以在命令行中直接运行该组件包支持的命令。
本地安装
- - save-dev: 其中参数–save-dev的含义是代表把你的安装包信息写入package.json文件的devDependencies字段中,包安装在指定项目的node_modules文件夹下。
- - save: 使用命令 --save 或者说不写命令 --save ,都会把信息记录到 dependencies 中;dependencies 中记录的都是项目在运行时需要的文件;
devDependencies 中记录的是项目在开发过程中需要使用的一些文件,在项目最终运行时是不需要的;也就是说我们开发完成后,最终的项目中是不需要这些文件的