webpack开发环境的基本配置

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’//开发环境};

3. 运行指令: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'

4. 运行指令：webpack