前端项目工程构建教程(三)webpack的安装与使用

原创 在下乃坑爹君 随笔 WebPack 349阅读 2017-06-29 00:09:02 举报

##安装
用npm 安装webpack
$ npm install webpack -g
$ npm install webpack1.15.0 --save-dev这个版本呢要稳定些

前端项目工程构建教程(三)webpack的安装与使用

在上述练习文件夹中创建一个package.json文件,这是一个标准的npm说明文件,里面蕴含了丰富的信息,包括当前项目的依赖模块,自定义的脚本任务等等。在终端中使用npm init命令可以自动创建这个package.json文件
$ npm init

前端项目工程构建教程(三)webpack的安装与使用

最后打个yes回车就可以了~

$ ls 查看当前目录
你就会发现多了个文件 package.json 没错,这就是刚才生成的一个文件
$ cat packjson.js 查看spackage.js文件内容

前端项目工程构建教程(三)webpack的安装与使用

下面就是我们目前搭建好的目录:

前端项目工程构建教程(三)webpack的安装与使用

##创建配置文件webpack.config.js

Webpack在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行。默认情况下,会搜索当前目录的webpack.config.js文件,这个文件是一个 node.js 模块,返回一个 json 格式的配置信息对象,或者通过 --config 选项来指定配置文件。
所以现在我们就来新建一个webpack.config.js,webpack.config.js文件通常放在项目的根目录中,它本身也是一个标准的Commonjs规范的模块。在里面填写进下面的内容:

javascript 代码

然后命令里输入webpack看看是否正常~

前端项目工程构建教程(三)webpack的安装与使用

发现运行命令webpack后,提示报错,那是因为webpack.config.js文件没有配置好~我们接着调整下这文件的配置:

前端项目工程构建教程(三)webpack的安装与使用

然后再次输入命令webpack

前端项目工程构建教程(三)webpack的安装与使用

OK,这样就没问题了

#webpack对脚本和样式的处理

在webpack.config.js里做了调整,同时:
我在目录.src/page/里面创建了两个文件夹index和login,在两个文件夹里分别创建了index.html和login.html空文件,接下来删除dist文件,重新webpack看看

前端项目工程构建教程(三)webpack的安装与使用

生成了两个对应的文件在dist的目录里

前端项目工程构建教程(三)webpack的安装与使用

前端项目工程构建教程(三)webpack的安装与使用

前端项目工程构建教程(三)webpack的安装与使用
####对了,打开谷歌浏览器之前,别忘记了命令里输入webpack运行,然后切换到view里的index.html文件,再开谷歌浏览器测试

前端项目工程构建教程(三)webpack的安装与使用
####果然陈功了。哈哈,很有意思

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复