先全局安装 :
npm i webpack webpack-cli -g
在工作文件夹 初始化
npm init -y
会出现一个package.json文件
在工作文件夹 根目录新建一个配置文件 ,js格式
webpack.config.js
在配置文件写
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin'); //自动引入插件
module.exports = {
mode:"development", //开发环境
//入口
entry:path.join(__dirname,'./src/main.js'),
/*出口*/
output:{
path:path.join(__dirname,'./dist'),
filename:"bundle.js"
},
/*插件 是一 数组 里面的插件都是构造函数 需要 */
plugins:[
new HtmlWebpackPlugin({
template: path.join(__dirname,'./src/index.html'),
filename: "index.html"
})
],
//配置模块
/**************************************************
*模块,把其他文件格式的文件 转化成模块,需要相应的loader
* 不同的文件 需要不同的 loader
* css-loader 将css文件转为 模块
* style-loader 将css模块插入网页文档中
* loader执行顺序是从右往左
* *************************************************/
module:{
rules:[
{test:/\.css$/,use['style-loader','css-loader']},
{test:/\.less$/,use:['style-loader','css-loader','less-loader']},
//配置图片支持
{test:/\.(png|jpg|gif|webp|jpeg)$/,
use:[{
loader:"url-loader",
options: {
limit: 1024,
//图片小于 1K 才转best64
// name:'[path][name]-[hash:5].[ext]'
name:'[name].[ext]'
},
//配置ES6转ES5
{test:/\.js$/,use:['babel-loader'],exclude:[/node_modules/,/dist/]}
]
}
}下载 插件 和 模块 集合
npm i html-webpack-plugin -D
npm install sytyle-loader css-loader -D //css支持模块
npm install less less-loader -D //less支持模块
npm install url-loader file-loader -D //图片支持模块
模块需要在配置文件webpack.config.js配置 具体在上面
图片模块loader会把图片转为best64的 ,如果图片很多很大,会很消耗内存 .所以在上面会有一个限制 limit :1024 ,
兼容性处理
配置ES6转ES5
npm install babel-core babel-loader@7.1.5 babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0 -D
还有再配置一个文件 .babelrc
{
"presets": ["env","stage-0"],
"plugins": ["transform-runtime"]
}我们要怎么使用 呢?
热更新需要下载一个插件
npm install webpack-dev-server -D
现在在回去看看package.json文件配置下
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --port 8888 --hot --open "
},
