先全局安装 :

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 "
  },