目录
(一) 其他
准备工作安装webpack
(二) 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.jsconsole.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');
配置webpackconst 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.cssbody {background: gray;}
创建main.jsrequire('./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.lessbody {background: gray;.title {background: green;color: #fff;font-size: 30px;}
}
创建main.jsrequire('./app.less');
配置webpackconst 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-loadernpm 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.jslet div = document.createElement('div');
div.style.background = 'green';
div.style.width = '300px';
div.style.height = '300px';
document.body.appendChild(div);
配置webpackconst 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
安装servernpm i webpack-dev-server -g (全局安装)
npm i webpack-cli --save-dev
运行命令webpack-dev-server --open
配置模块热更新const webpack = require('webpack');
new webpack.HotModuleReplacementPlugin()
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教程(一)的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。
