webpack2使用ch2-entry和output简要说明

1 entry打包入口 打包字符串和数组

const webpack = require(‘webpack‘),
      path = require(‘path‘);

module.exports = {
    entry: ‘./src/script/main.js‘ //字符串
    //entry: [‘./src/script/main.js‘, ‘./src/script/a.js‘], //数组
    output: {
        path: path.resolve(__dirname, ‘./dist/js‘),
        filename: ‘hundle.js‘ //字符串或数组时输出为单个文件
    }
};

1.1 打包

2 打包对象时 

const webpack = require(‘webpack‘),
      path = require(‘path‘);

module.exports = {
    entry: {
      main: ‘./src/script/main.js‘, //如果只有这个对象时
    },
    output: {
        path: path.resolve(__dirname, ‘./dist/js‘),
        filename: ‘hundle.js‘ //可以指定一个固定的文件
    }
};
const webpack = require(‘webpack‘),
      path = require(‘path‘);

module.exports = {
    entry: { //打包多个对象时
      main: ‘./src/script/main.js‘,
      a: ‘./src/script/a.js‘
    },
    output: {
        path: path.resolve(__dirname, ‘./dist/js‘),
        //必须分开输出
        filename: ‘[name]-[chunkhash].js‘ //命名格式 保证生成多个对象
    }
};

或者格式为

filename: ‘[name]-[hash].js‘ //命名格式

 每次编译不管是否修改文件名都会变

时间: 2024-10-17 12:12:01

webpack2使用ch2-entry和output简要说明的相关文章

webpack entry和output配置属性

1.entry entry的三种配置方式: (1)传递字符串: 单个入口语法:传递一个字符串 entry: './src/js/main.js', (2)传递数组 将创建“多个主入口(multi-main entry),并且将它们的依赖导向(graph)到一个“chunk”时. entry: ['./src/js/main.js','./src/js/a.js'], 示例,webpack.config.js文件为: module.exports = { //打包入口 entry: ['./src

webpack——entry,output/

entry:打包入口 代码的入口,找到依赖模块 打包的入口,webpack去哪个文件找依赖,或是去那个文件依赖的依赖 可以是一个或者多个入口 例如: 1.module.exports={ entry:'index.js'} 这个module.exports对象是webpack的配置,配置有一个属性就是entry,entry属性的值就是一个文件名index.js,也可以加一个路径,只要可以找到文件 2.module.exports={entry:['index.js','vendor.js']}

webpack2学习日志

webpack说容易也容易,说难也难,主要还是看个人,想学到什么样的程度,很多公司可能要求仅仅是会用就行,但是也有一些公司要求比较高,要懂一些底层的原理,所以还是要花一些时间的,看个人需求.这篇仅仅是做了一些总结,都是来自官网,便于复习. 一,先理解webpack的概念: 官网上:webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用

webpack的 entry

webpack 在打包的时候有几种选择: entry: "./app/entry", // string | object | array entry: ["./app/entry1", "./app/entry2"], entry: { a: "./app/entry-a", b: ["./app/entry-b1", "./app/entry-b2"] }, 对于非单页应用的项目,

Webpack2入门

webpack 2 将在其文档完成之后正式发布.但这并不意味着不可以开始使用它,如果你知道怎么配置的话. 什么是 Webpack? 简单来说,Webpack 就是一个针对 JavaScript 代码的模块打包工具.但是自发布以来,它演变成了一个针对所有前端代码的管理工具(不管是其本身有意还是社区的意愿). 旧的任务运行工具处理方式:HTML.CSS 和 JavaScript 都是分离的.必须分别对每一项进行管理,并且还要确保所有东西正确地部署到生产环境. 像 Gulp 这样的任务运行工具可以操作

搭建一个webpack微服务器

[前言]:因为最近在vue2.0的时候用到了webpack的externals,才发现我之前都只是用webpack做一些搭建完项目后的"收尾工作"--即打包,而没有把它纳入到项目开发的"主体过程"中来,真是"物不尽其用".于是就有了我今天的这篇学习文章:利用webpack-dev-server搭建一个webpack的服务器 参考资料: webpack-dev-server的github地址:https://github.com/webpack/w

webpack 代码拆分,按需加载

转自:https://segmentfault.com/a/1190000007649417?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly 如果利用 webpack 将项目中的所有代码打包在一起,很多时候是不适用的,因为代码中有些东西我们总是希望将其拆分出来.比如: 样式表,希望利用 link 标签引入 使用概率较低的模块,希望后期需要的时候异步加载 框架代码,希望能利用浏览器缓存下部分不易变动的代码 下面是我在阅

【webpack】webpack-dev-server生猛上手——让我们来搭一个webpack的微服务器吧!

[前言]:因为最近在搞百度地图API的时候用到了webpack的externals,才发现我之前都只是用webpack做一些搭建完项目后的"收尾工作"--即打包,而没有把它纳入到项目开发的"主体过程"中来,真是"物不尽其用".于是就有了我今天的这篇学习文章:利用webpack-dev-server搭建一个webpack的服务器 参考资料: webpack-dev-server的github地址:https://github.com/webpack

有了它们就能更好的理解webpack了

最新内容,请在github阅读.同时,All issue and star welcomed! 1.获取webpack配置的输出配置 compilation.outputOptions 其中该对象有如下内容: { path: 'builds', filename: 'bundle.js', publicPath: 'builds/', chunkFilename: '[id].bundle.js', library: '', hotUpdateFunction: 'webpackHotUpdat