webpack相关知识
- 能够处理JS文件的互相依赖关系
- 能够处理JS的兼容问题
安装
全局安装
npm install webpack -g
项目安装
npm install webpack --save-dev
在项目中创建文件夹与入口文件
dist
src
css
images
js
index.html
main.js
在项目中初始化
npm init -y
打包命令
webpack ./src/main.js -o ./dist/bundle.js
创建webpack.config.js配置文件手动,可直接运行webpack命令打包
const path = require('path'); module.exports = { mode: 'production', entry: path.join(__dirname, './src/main.js'), output: { path: path.join(__dirname, './dist'), filename: "bundle.js", } };
安装热更新工具webpack-dev-server
npm install webpack-dev-server -D 或者 yarn add webpack-dev-server -D
在package.json文件中添加命令别名
npm run dev
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server" },
运行命令
npm run dev
开启热更新工具通过http://localhost:8080/src/打开网页,并修改script引入文件
打包生成的bundle.js文件,并没有存放至物理磁盘中,而是托管到了电脑的内存中,所以在根目录中也看不到bundle.js文件
<script src="/bundle.js"></script>
优化配置
在package.json中配置(推荐使用)
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
- --open 自动打开默认浏览器
- --port 3000 指定运行的服务器端口
- --contentBase src 跳转到src目录
- --hot 局部更新,配置后相当于打了一个补丁
或者在webpack.config.js中配置
//还原package.json配置 "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot" //在webpack.config.js中配置 const webpack = require('webpack');//wp4以上不需要 devServer: { //--open --port 3000 --contentBase src --hot open: true, port: 3000, contentBase: 'src', hot: true }, plugins: [ new webpack.HotModuleReplacementPlugin()//wp4以上不需要 ]
安装html-webpack-plugin插件(生成内存中的html文件)
npm install html-webpack-plugin -D 或者 yarn add html-webpack-plugin -D
配置html-webpack-plugin
配置完成后可以去掉index的bundle.js引用文件
//在webpack.config.js中 const htmlWebpackPlugin = require('html-webpack-plugin'); plugins: [ new webpack.HotModuleReplacementPlugin(), new htmlWebpackPlugin({ template: path.join(__dirname, './src/index.html'), filename: "index.html" }) ]
打包CSS文件
在main.js文件中
import './css/index.css'
安装loader
npm install style-loader css-loader -D 或者 sudo yarn add style-loader css-loader -D
在webpack.config.js文件中配置规则
module: { rules: [ {test: /\.css$/, use: ['style-loader', 'css-loader']} ] }
打包LESS文件
在main.js文件中
import './css/index.less'
安装loader
npm install less-loader -D sudo npm install less -D 或者 sudo yarn add less-loader -D sudo yarn add less -D
在webpack.config.js文件中配置规则
module: { rules: [ {test: /\.css$/, use: ['style-loader', 'css-loader']}, {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}, ] }
打包scss文件
import './css/index.scss'
sudo yarn add sass-loader -D
sudo yarn add node-sass -D//比较慢
module: {
rules: [
{test: /\.css$/, use: ['style-loader', 'css-loader']},
{test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
{test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']},
]
}
打包图片
npm install url-loader file-loader -D
或者
sudo yarn add url-loader file-loader -D
module: {
rules: [
{test: /\.css$/, use: ['style-loader', 'css-loader']},
{test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
// {test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']},
{test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader'},
]
}
注: 设置参数
limit参数是图片大小,单位是byte。小于此值则将图片转为base64
name参数可以对图片命令,不设置则名称为一个hash值
{test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=1374&name=[hash:8]-[name].[ext]'},
相关文章
- webpack相关知识
能够处理JS文件的互相依赖关系 能够处理JS的兼容问题 安装 全局安装 npm install webpack -g 项目安装 npm install webpack --save-
- Javascript基础和ES6
HTML的基础事件 onmouseover、onmouseout表示JS事件的鼠标移入鼠标移出 document.getElementById('id') JS中选择HTML的ID元素<in
- JavaScript编码规则
JavaScript编码规则 目的:改善协作编码、代码质量。 var 声明变量必须用var。 防止变量变为全局变量,污染全局环境。 常量 基本类型number、string、boolean是常量值。对
- JavaScript获取和设置CSS属性
获取样式 元素对象的宽高位置距离等属性 如offsetWidht、cilentWidht、scrollWidth…… let oWidth=obj.offsetWidth; 注意: 只能获取属
- javascript作用域、上下文、this和闭包详解
词法作用域lexical scope 定义在词法阶段的作用域。词法作用域是变量和语句块在定义时所处的位置决定的。 全局 块级:在{}之内是一个块级作用域(ES6之前没有块级作用于只有函数内的局部作用
随机推荐
- webpack相关知识
能够处理JS文件的互相依赖关系 能够处理JS的兼容问题 安装 全局安装 npm install webpack -g 项目安装 npm install webpack --save-
- Javascript基础和ES6
HTML的基础事件 onmouseover、onmouseout表示JS事件的鼠标移入鼠标移出 document.getElementById('id') JS中选择HTML的ID元素<in
- JavaScript编码规则
JavaScript编码规则 目的:改善协作编码、代码质量。 var 声明变量必须用var。 防止变量变为全局变量,污染全局环境。 常量 基本类型number、string、boolean是常量值。对
- JavaScript获取和设置CSS属性
获取样式 元素对象的宽高位置距离等属性 如offsetWidht、cilentWidht、scrollWidth…… let oWidth=obj.offsetWidth; 注意: 只能获取属
- javascript作用域、上下文、this和闭包详解
词法作用域lexical scope 定义在词法阶段的作用域。词法作用域是变量和语句块在定义时所处的位置决定的。 全局 块级:在{}之内是一个块级作用域(ES6之前没有块级作用于只有函数内的局部作用