博客
关于我
Webpack 基本环境搭建
阅读量:795 次
发布时间:2023-02-11

本文共 2166 字,大约阅读时间需要 7 分钟。

Webpack配置实践指南

1. 安装基础依赖

首先,我们需要安装Webpack的前置工具。打开终端,执行以下命令:

cnpm init
cnpm install webpack -g
cnpm install webpack --save-dev

创建package.json文件后,在项目根目录下运行上述命令。接下来,我们需要创建必要的文件结构:

mkdir -p src
touch src/alert.js
touch src/index.js
touch webpack.config.js
touch index.html

2. 核心配置

编辑webpack.config.js文件,添加基本配置:

module.exports = {
entry: './src',
output: {
path: 'build',
filename: 'bundle.js'
}
}

src文件夹中,创建index.js文件,引入alert.js模块:

require('./alert.js');

3. 加载器(Loader)配置

安装必要的加载器依赖:

cnpm install babel-loader babel-core babel-preset-es2015 -D

创建.babelrc文件,配置Babel预设:

{
"presets": ["es2015"]
}

修改webpack.config.js,添加Babel加载器:

module.exports = {
entry: './src',
output: {
path: 'build',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
]
}
}

创建src/robot.js文件,添加测试代码:

const greetings = (text, person) => {
return `${text}, ${person}. I read you but I'm afraid I can't do that`;
};
export default greetings;

src/index.js中使用导入并输出:

import greetings from './robot.js';
document.write(greetings("Hello, ", "Webpack"));

4. CSS模块处理

安装CSS处理相关依赖:

cnpm install css-loader style-loader -D

创建src/app.css文件,添加样式:

.element {
background-color: blue;
color: white;
}

src/index.js中导入CSS文件并使用:

import styles from './app.css';
console.log(styles.element);

5. 提取CSS到独立文件

为了将CSS模块提取到独立文件,安装ExtractTextWebpackPlugin:

cnpm install extract-text-webpack-plugin -D

修改webpack.config.js,添加CSS模块处理:

module.exports = {
entry: './src',
output: {
path: 'build',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
options: {
presets: ['es2015']
}
},
{
test: /\.css$/,
loader: 'extract-text-webpack-plugin',
options: {
extract: {
filename: '[name]__[local]___[hash:base64:5]'
}
}
}
]
}
}

这样,所有CSS模块会被提取到独立的CSS文件中,便于管理和优化。

通过以上步骤,你已经完成了Webpack的基础配置,能够成功构建项目,实现代码的模块化管理和CSS的提取。接下来,按照npm start命令运行项目,将会生成build/bundle.js文件,并通过index.html展示结果。

转载地址:http://ajbfk.baihongyu.com/

你可能感兴趣的文章
MySQL中你必须知道的10件事,1.5万字!
查看>>
MySQL中使用IN()查询到底走不走索引?
查看>>
Mysql中使用存储过程插入decimal和时间数据递增的模拟数据
查看>>
MySql中关于geometry类型的数据_空的时候如何插入处理_需用null_空字符串插入会报错_Cannot get geometry object from dat---MySql工作笔记003
查看>>
mysql中出现Incorrect DECIMAL value: '0' for column '' at row -1错误解决方案
查看>>
mysql中出现Unit mysql.service could not be found 的解决方法
查看>>
mysql中出现update-alternatives: 错误: 候选项路径 /etc/mysql/mysql.cnf 不存在 dpkg: 处理软件包 mysql-server-8.0的解决方法(全)
查看>>
Mysql中各类锁的机制图文详细解析(全)
查看>>
MySQL中地理位置数据扩展geometry的使用心得
查看>>
Mysql中存储引擎简介、修改、查询、选择
查看>>
Mysql中存储过程、存储函数、自定义函数、变量、流程控制语句、光标/游标、定义条件和处理程序的使用示例
查看>>
mysql中实现rownum,对结果进行排序
查看>>
mysql中对于数据库的基本操作
查看>>
Mysql中常用函数的使用示例
查看>>
MySql中怎样使用case-when实现判断查询结果返回
查看>>
Mysql中怎样使用update更新某列的数据减去指定值
查看>>
Mysql中怎样设置指定ip远程访问连接
查看>>
mysql中数据表的基本操作很难嘛,由这个实验来带你从头走一遍
查看>>
Mysql中文乱码问题完美解决方案
查看>>
mysql中的 +号 和 CONCAT(str1,str2,...)
查看>>