webpack开发环境的基本配置

川长思鸟来 2022-12-30 15:53 202阅读 0赞

## webpack开发环境的基本配置 ##

## 1. 创建配置文件 ##

1.  创建文件webpack.config.js
2.  配置内容如下

> const\{resolve\}=require(‘path’);//node内置核心模块，用来处理路径问题。  
> module.exports=\{entry:’./src/js/index.js’,//入口文件output:\{//输出配置filename:’./built.js’,//输出文件名path:resolve(\_\_dirname,‘build/js’)//输出文件路径配置\},mode:‘development’//开发环境\};

1.  运行指令:webpack

## 2.打包样式资源 ##

1.  创建文件
2.  下载安装loader包

> npmicss-loaderstyle-loaderless-loaderless-D

1.  修改配置文件
2.  `module.exports={entry:'./src/js/index.js',//入口文件output:{//输出配置filename:'./built.js',//输出文件名path:resolve(__dirname,'build/js')//输出文件路径配置},mode:'development'//开发环境};3.运行指令:webpack4.结论:此时功能与上节一致3.2打包样式资源1.创建文件2.下载安装loader包npmicss-loaderstyle-loaderless-loaderless-D3.修改配置文件//resolve用来拼接绝对路径的方法const{resolve}=require('path');module.exports={//webpack配置//入口起点entry:'./src/index.js',//输出output:{//输出文件名filename:'built.js',//输出路径//__dirnamenodejs的变量，代表当前文件的目录绝对路径path:resolve(__dirname,'build')},//loader的配置module:{rules:[//详细loader配置//不同文件必须配置不同loader处理{//匹配哪些文件test:/\.css$/,//使用哪些loader进行处理use:[//use数组中loader执行顺序：从右到左，从下到上依次执行//创建style标签，将js中的样式资源插入进行，添加到head中生效'style-loader',//将css文件变成commonjs模块加载js中，里面内容是样式字符串'css-loader']},{test:/\.less$/,use:['style-loader','css-loader',//将less文件编译成css文件//需要下载less-loader和less'less-loader']}]},//plugins的配置plugins:[//详细plugins的配置],//模式mode:'development',//开发模式//mode:'production'}`
3.  运行指令:webpack

## 3.打包HTML资源 ##

1.  创建文件
2.  下载安装plugin包.  
    `npminstall--save-devhtml-webpack-plugin`
3.  修改配置文件

const{resolve}=require('path');constHtmlWebpackPlugin=require('html-webpack-plugin');module.exports={entry:'./src/index.js',output:{filename:'built.js',path:resolve(__dirname,'build')},module:{rules:[//loader的配置]},plugins:[//plugins的配置//html-webpack-plugin//功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）//需求：需要有结构的HTML文件newHtmlWebpackPlugin({//复制'./src/index.html'文件，并自动引入打包输出的所有资源（JS/CSS）template:'./src/index.html'})],mode:'development'

1.  运行指令：webpack