webpack 的安装及使用

webpack 

目录

webpack 官网

安装命令及配置

1.安装yarn

2.初始化文件

4.创建src文件夹， 在src下创建index.js文件

5.配置webpack

7.入口文件

第一种

第二种

第三种

8.出口文件

9.模式

10.开发服务器

注意事件

使用实例

Loaders

举例：

1.引入CSS及STML样式

style.css

在webpack.config.js

官网

https://webpack.docschina.org/

安装命令及配置

本版本通过yarn来安装

1.安装yarn

npm install yarn -g

2.初始化文件

 yarn init -y

3.安装webpack

yarn add -D webpack webpack-cli

4.创建src文件夹， 在src下创建index.js文件

5.配置webpack

在根目录，创建webpack.config.js

6.打包命令

yarn webpack

发出打包命令后，会在根文件下建立dist文件夹

7.入口文件

有3种方式配置入口文件：

第一种

entry: './src/hello.js'

第二种

 entry: ['./src/hello.js','./src/index.js']

第三种

 entry: { a:'./src/hello.js', b:'./src/index.js' }

8.出口文件

出口文件内容在output写入

output: {… }

其中

9.模式

 mode:"production" / "development"

10.开发服务器

yarn add -D webpack-dev-server yarn webpack serve 打包服务器

yarn webpack serve –open 自动打包

注意事件

1.出口文件和入口文件对得在webpack.config.js下配置

2.得在module.exports = {…}下写

3.别忘了创建一个HTML页面方便查看哦

4.也别忘在HTML引入打包文件

<script src="./dist/main.js"></script>

使用实例

由于为了保证文件打包体积不会太大，所以只识别JS文件

因此如果要写CSS及其他类型的文件需要引入Loaders

Loaders

Webpack 支持使用 loader 对文件进行预处理。你可以构建包括 JavaScript 在内的任何静态资源。并且可以使用 Node.js 轻松编写自己的 loader。

详情可进入官网查阅

举例：

1.引入CSS及STML样式

npm install –save-dev style-loader

在style.css

body {
background: green;
}

在webpack.config.js

module: {
rules: [
{
test: /\\.css$/i,
use: ['style-loader', 'css-loader'],
},
]
}

2.图片

module: {
rules: [
{
// png|svg|jpg|jpeg|gif 区别
test: /\\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
]}