目录
- 配置css-loader
- 配置less-loader
- 配置url-loader
- 配置压缩插件
- 配置html插件
- 配置dev-server
- 配置热更新
- 配置跨域
准备工作
- 创建webpackdemo文件夹
- 启动cmd, 进入webpackdemo目录,运行npm init初始化package.json
- 创建app.css文件和app.less文件
// app.css
body {
background: #EEEEEE;
}
// app.less
.box {
width: 600px;
margin: 10px auto;
img {
width: 600px;
}
p {
text-align: center;
}
}
- 创建入口文件main.js
require('./app.css');
- 创建webpack.config.js
const path = require('path');
module.exports = {
entry: './main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js'
},
mode: 'development'
}
- 测试打包是否成功
配置css-loader
- 在webpack.config.js里加上下面的代码
module: {
rules: [
{
test:/\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
- 安装style-loader和css-loader
npm i style-loader css-loader --save-dev
- 在main.js里加上以下代码:
require('./app.css')
- 运行 webpack 命令
- 检查配置是否成功
在dist目录创建index.html,把打包后的index.js文件进行加载,打开index.html,若背景是灰色说明成功
配置less-loader
- 在module的rules里面加上以下代码
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
- 安装less和less-loader
npm i less --save-dev
npm i less-loader --save-dev
- 在main.js加入以下代码
require('./app.less');
- 检查配置是否成功
在dist的index.html里加入下面的代码
<div class="box">
<p>测试less-loader</p>
<img src="../img.png"/>
</div>
打开index.html检查app.less里的样式是否生效
配置url-loader
- 在webapck.config.js的module里的rules对象里加上下面的代码
{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8192
}
}]
}
- 安装file-loader和url-loader
npm i file-loader url-loader --save-dev
- 在main.js里加上下面的代码
let img = document.createElement('img');
img.src = require('./img.png');
document.body.appendChild(img);
- 运行webpack命令,打开dist里面的index.html查看是否增加了一张图片
配置压缩插件和html插件
- 在webpack配置文件的开头加入以下代码:
// 生成html的插件
const htmlWebpackPlugin = require('html-webpack-plugin');
// 压缩的插件
const uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
在module后面添加以下代码:
plugins: [
new htmlWebpackPlugin(),
new uglifyjsWebpackPlugin()
]
- 安装htmlWebpackPlugin和uglifyjsWebpackPlugin插件,同时还需要局部安装webpack
npm i webpack html-webpack-plugin uglifyjs-webpack-plugin --save-dev
- 运行打包命令 webpack,打开dist里面的index.html和index.js检查配置是否成功
配置dev-server
- 在webpack配置文件加上以下代码
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
port: 9000
}
- 安装webpack-dev-server 和webpack-cli
npm i webpack-dev-server webpack-cli --save-dev
- 在package.json的scripts里面加上下面这一句
"dev": "webpack-dev-server --open --oneline"
- 运行npm run dev 检查配置是否成功
配置热模块替换(热更新)
- 在webpack配置文件的开头加上
const webpack = require('webpack');
在plugins里加上
new webpack.HotModuleReplacementPlugin()
``
在devServer加上
hot: true
2. 运行npm run dev检查控制台是否有打印以下信息
[WDS] Hot Module Replacement enabled.
有则表示热更新已开启
#### 配置webpack跨域
1. 在webpack的devServer对象里加上
proxy: {
'/v4': {
target: 'https://m.maizuo.com',
// 允许跨域
changeOrigin: true,
pathRewrite: {
'^/v4': '/v4'
}
}
}
2. 在main.js里加上
// 测试跨域请求
const $ = require('jquery');
let url = '/v4/api/film/now-playing?__t=1535683702386&page=1&count=5';
$.ajax({
type:"get",
url,
success: (res)=> {
console.log(res)
},
error: ()=> {
alert('请求失败');
}
});
3. 安装jquery
npm i jquery --save-dev
4. 执行npm run dev
看是否拿到了服务器的数据
网友评论