webpack使用入门

流程　

打开项目 -> 配置webpack.config文件 -> 终端进入项目目录 -> 输入指令webpack（或者webpack --watch）打包得到输出文件  -> 导包使用输出文件即可 

 

 

1.新建简单项目

　　编写模块Hello.js

//exports将模块暴露出去
exports.sayHi=function (){
    document.write("<div>Hello Webpack33333!</div>")
}

注意：exports将模块暴露　

　编写主程序main.js，并通过require引用模块

//引用其他模块
var hello =require("./Hello")
hello.sayHi();

2.编写webpack.config.js配置文件

　　webpack配置文件：webpack.config.js　

module.exports = {
    entry:'./modules/main.js', //入口文件
    output:{        //将各个模块合并打包至输出文件
        //node.js中__dirname变量获取当前模块文件所在目录的完整绝对路径
        filename:'./.js/bundle.js' //输出文件
    },
    mode:'development'//必须添加开发环境
}

3.配置打包环境

进入终端项目目录，指令npm init -y，并在生成的package,json文件添加开发环境

 

 

 

或者：配置文件webpack.config.js中加入mode：'development'

 

 

 tips：终端退出命令 Ctrl + c

4.打包

终端窗口执行打包命令webpack

 

 或者idea终端执行也可

 

tips：webpack --watch 为类似于热部署打包，可在实现查看修改数据

 

5.可以引用打包完成后的生成文件

生成文件为：

 

 然后编写简单的html文件导入即可查看效果

 

 

效果：

 

 

 

 

 

模板：

var webpack = require('webpack');

module.exports = {

     entry:'./entry.js', //入口文件

     output:{

          //node.js中__dirname变量获取当前模块文件所在目录的完整绝对路径 

          path:__dirname, //输出位置

          filename:'build.js' //输入文件

     },

     module:{

          loaders:[

               {

                   test:/\.css$/,//支持正则

                   loader:'style-loader!css-loader' 

               }

          ]

     },

//其他解决方案配置

resolve: {

    extensions: ['', '.js', '.json', '.css', '.scss']//添加在此的后缀所对应的文件可以省略后缀

},

     //插件

     plugins:[

          new webpack.BannerPlugin('This file is created by ly')

     ]，

　　watch：true

}