webpack前端构建工具学习总结(三)之webpack.config.js配置文件
2017-03-05 22:13
771 查看
Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行。默认情况下,会搜索当前目录的
webpack文档:https://webpack.github.io/docs/
1.新建一个文件夹src存放打包前的源文件,dist文件夹存放打包后的文件,新建一个webpack.config.js为webpack的配置文件
打包前的文件夹中的内容
2.新建一个index1.html引用dist下打包后的js
3.输入命令:webpack,即可按照webpack.config.js中的配置项进行编译
4.编译完的文件目录和内容如下
5.如果将webpack.config.js重命名为webpack.dev.config.js,则直接执行默认的webpack命令则会找不到相应的配置文件,需要借助于webpack的--config选项来指定配置文件
命令:webpack --config webpack.dev.config.js
6.如果要查看编译的进度,打包的模块之类的,可以在package.json中的scripts标签内通过webpack的属性值来指定
7.输入命令:npm run webpack,来编译打包
webpack.config.js中entry值的详细介绍:
https://webpack.github.io/docs/configuration.html#entry
entry的值可以是一个string类型的字符串,也可以是一个数组,还可以是一个json对象
数组:这种情况会将entry定义的数组中的文件内容打包到output中定义的这一个文件
json对象:这种情况适应于多页面时的编译
output属性值介绍:https://webpack.github.io/docs/configuration.html#output
使用命令:npm run webpack,编译打包将会看到在dist/js下生成两个文件
webpack.config.js文件,这个文件是一个 node.js 模块,返回一个 json 格式的配置信息对象,或者通过
--config选项来指定配置文件。
webpack文档:https://webpack.github.io/docs/
1.新建一个文件夹src存放打包前的源文件,dist文件夹存放打包后的文件,新建一个webpack.config.js为webpack的配置文件
打包前的文件夹中的内容
2.新建一个index1.html引用dist下打包后的js
3.输入命令:webpack,即可按照webpack.config.js中的配置项进行编译
4.编译完的文件目录和内容如下
5.如果将webpack.config.js重命名为webpack.dev.config.js,则直接执行默认的webpack命令则会找不到相应的配置文件,需要借助于webpack的--config选项来指定配置文件
命令:webpack --config webpack.dev.config.js
6.如果要查看编译的进度,打包的模块之类的,可以在package.json中的scripts标签内通过webpack的属性值来指定
7.输入命令:npm run webpack,来编译打包
webpack.config.js中entry值的详细介绍:
https://webpack.github.io/docs/configuration.html#entry
entry的值可以是一个string类型的字符串,也可以是一个数组,还可以是一个json对象
数组:这种情况会将entry定义的数组中的文件内容打包到output中定义的这一个文件
json对象:这种情况适应于多页面时的编译
output属性值介绍:https://webpack.github.io/docs/configuration.html#output
使用命令:npm run webpack,编译打包将会看到在dist/js下生成两个文件
相关文章推荐
- webpack前端构建工具学习总结(一)之webpack安装、创建项目
- webpack前端构建工具学习总结(四)之自动化生成项目中的html页面
- webpack前端构建工具学习总结(二)之loader的使用
- 前端模块化工具--webpack学习心得
- 从Npm Script到Webpack,6种常见的前端构建工具对比
- 深入浅出的webpack4构建工具---浏览器前端资源缓存(十一)
- 前端自动化构建工具webpack简单入门——2
- 前端模块化工具--webpack学习心得
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
- 前端自动化构建工具之webpack入门——简单入门
- 从Npm Script到Webpack,6种常见的前端构建工具对比
- 一天掌握前端三大构建化工具Grunt、Gulp、Webpack(上)
- 前端打包构建工具Gulp、Rollup、Webpack、Webpack-stream
- 微信牛牛平台搭建前端自动化构建工具之webpack入门
- webpack学习教程之前端性能优化总结
- React学习实例总结,包含yeoman安装、webpack构建
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
- ReactJS学习-使用webpack构建工程,使用materialUI构建前端,与hprose后端通讯
- 前端自动化构建工具Webpack开发模式入门指南 (网上看到的,写得很详细)
- webpack 前端构建