当前位置:知识问问>生活百科>webpack安装使用教程

webpack安装使用教程

2024-10-20 13:04:08 编辑:join 浏览量:586

webpack安装使用教程

1.我最近大量使用的是jspm,但因为用它搭建的前端开发环境中,写测试代码非常困难,而项目又需要写测试,所以决定先试试webpack。

安装webpackwebpack是一个npm包,所以我们通过npm命令来全局安装:

npminstallwebpack-g安装完成后,命令行下就有webpack命令可用,执行webpack--help可以查看webpack提供的各种命令。

初始化项目grunt.js一类工具可以借助yeoman来初始化项目,目前我并没有看到webpack有类似方法,所以当node.js项目来初始化。

npminit创建一个package.json文件npminstallwebpack--save-dev在当前目录下安装局域的webpack完成以上两个步骤后,我们的项目下有一个package.json文件,一个node_modules文件夹,我们还需要一个index.html文件,内容如下:

2.我们的代码将组织在JavaScript模块中,项目会有一个入口(entry)文件,比如main.js,我们需要通过webpack的配置文件指明它的位置。

在根目录新建一个webpack.config.js文件,添加如下内容:

3.因为我们在项目部署前需要打包合并js文件,所以还需要在webpack.config.js中配置一个output:

module.exports={entry:"./main.js",output:{path:__rname,filename:"bundle.js"}}

output定义我们打包出来的文件位置及名称。

4.完成以上后,试着在项目根目录下执行webpack命令,我们的根目录下会多出一个bundle.js文件:

webpackbuild自动刷新到现在为止,我们还没在浏览器中打开index.html文件,实际上,我们连bundle.js文件都还没加入index.html文件中。现在且先加入:

webpack教程

标签:webpack

版权声明:文章由 知识问问 整理收集,来源于互联网或者用户投稿,如有侵权,请联系我们,我们会立即处理。如转载请保留本文链接:https://www.zhshwenwen.com/life/429786.html
热门文章