webpack 4.x 快速上手使用
说明:使用软件 vs code,前提需要全局安装node.js
-
一、 环境安装
-
打开项目文件,首先安装 webpack
npm add webpack webpack-cli -g // 全局安装 npm add webpack webpack-cli -D // 本地安装,快速入手使用 此方式
安装完后会有一个 node_modules 文件夹,和一个package-lock.json 不用管他
-
初始化项目
npm init -y
初始化之后会有一个package.json
-
webpack.config.js 配置文件 打包js
默认配置文件在根目录,所以在跟目录创建一个 webpack.config.js 文件
const path = require('path'); //引入path module.exports = { mode: 'development',//默认为 production 生产环境,会自动压缩,如果不想自动压缩的话,设置成development 开发环境, entry: './src/index.js',//引入文件 output: { filename: 'bundle.js',//打包之后的名字,可以加哈希名[hash:8]-bundel.js,义为八位数的hash值 path: path.join(__dirname, 'dist')//打包之后存储位置 } };
在相应位置创建文件,打包js文件
经过操作3已经可以打包, 为方便快速打包 修改 package.json 添加如下信息
注意在package.json 中不允许有注释
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack --config webpack.config.js"//可以设置配置文件的位置 },
-
打包css文件
打包css需要,下载两个loader
添加两个loader npm add style-loader css-loader -d
创建一个css文件并,将css文件导入index.js
import './style.css';//es6 语法必须用webpack打包后才能解析
配置文件添加如下内容webpack.config.js
加入到module.exports中 module: { rules: [ { test: /\.css$/,//匹配.css文件 use: [ 'style-loader', 'css-loader' ] } ] },
-
打包html文件
需要导入 html-webpack-plugin
npm add html-webpack-plugin
配置文件添加如下内容webpack.config.js
//顶部再添加 const HtmlWebpackPlugin = require('html-webpack-plugin'); //加入到module.exports中 plugins: [ new HtmlWebpackPlugin({ title: 'webpack hello',//打包出来会将html文件的title替换掉,前提是title用模板的书写方式 filename: 'index.html',//输出文件名 template: './src/index.html'//从哪个文件输出 }) ]
在index.js中添加导入html
import './index.html'; import './style.css'; console.log("hello webpack")
-
打包img
**注意:**打包css里的图片和html标签的图片是有区别的,此贴为快速上手不细讲,一串全部搞定
导入图片前需要添加三个loader,
npm add html-loader url-loader file-loader
修改配置文件webpack.config.js
在 module: { rules: [ 内部添加 { test: /\.(htm|html)$/, use: ['html-loader'] }, { test: /\.(png|jpg|gif|jpeg)$/, use: [{ loader: 'url-loader', options: { esModule: false, // 这里设置为falsename name: '[hash].[ext]',//打包后文件名为一串hash加文件尾缀,[name].[ext]即为原文件名 limit: 10240 //当图片小于10k时base64编码并载入浏览器能够减少http请求数 } }] }
-
webpack-dev-server实时打包更新
首先安装
npm add webpack-dev-server
配置文件webpack.config.js
//在module.exports 内添加 devServer: { contentBase: './dist', hot: true,//希望是热更新就使用此项 port: 3000 //指定端口 },
添加快捷启动修改package.json
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack-dev-server", "build": "webpack" },
注意:此时若要运行webpack 要用如下命令
npm run-script build
时间:2020年3月13
-
至此快速入门完毕
*附件:*本文所涉及到的下载均为写作时的最新版本,如下
"dependencies": {
"css-loader": "^3.4.2",
"file-loader": "^5.1.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^1.1.3",
"url-loader": "^3.0.0",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
相关代码已发部到gitee,记得点赞留言
https://gitee.com/xiaoyangjj/quick_start_of_webpack4_x