webpack 不同文件不同版本号_webpack打包的文件,自动加了版本号,导致很多无效的请求 - CSDN
精华内容
参与话题
  • 翻译了webpack官方英文文档,整合互联网上对webpack介绍的教程,完整全面的认识使用webpack
    
    

    0、准备工作

    下载完node.js之后根据安装提示一步步安装即可,node.js的兴起带来了一款叫做npm的包管理器

    webpack模块可以被npm包管理器安装

    安装webpack

    //在全局安装webpack使用以下命令。
    $ npm install -g webpack
    

    webpack已经安装到计算机上,现在可以使用webpack命令了。

    1、在项目中使用webpack

    使用以下命令在项目根目录下生成package.json文件

    $ npm init
    	

    使用sublimetext编辑器打开package.json文件应该是这个样子的。

    2、安装webpack到项目中

    将webpack加入到pageage.json配制文件中,使用以下命令

    $ npm install --save-dev webpack
    	

    此时再看package.json文件,对比package.json刚刚创建时,新增加了一段代码。

    "devDependencies": {
    		"webpack": "^1.13.2"
    	}

    webpack依赖模块已经配置到我们的项目中了,并且项目目录中新增了一个node_modules的文件夹,打开文件夹可以看到我们刚刚安装的webpack模块。

    3、webpack的版本

    目前有两个可用的webpack版本,分为标准和测试版,测试版使用-beta标记区分。测试版包含不稳定和带有实验性质的特征,并且没有全面的测试。所以你应该使用标准版的webpack。

    //后缀版本号安装相应版本
    	$ npm install webpack@1.2.x --save-dev

    4、开发工具

    webpack-dev-server模块能快速配置一个本地的服务器,并且当每次保存修改过的代码后,测试服务器将立即自动刷新页面,省去了每次都要手动打包编译代码和刷新页面的的麻烦。

    $ npm install webpack-dev-server --save-dev

    5、配置webpack.config.js文件

    接下来就小试牛刀,使用使用webpack做一个非常非常简单的操作。

    • 首先在项目根目录下新建两个文件夹,一个叫app,用来存放为打包前的源代码;另一个目录就叫dist,用来存放webpack打包输出后的文件。

    • 接着,在dist文件夹中新建一个html文档,我命名为index.html,并搭建好html文档的基本结构。

    • 之后,我们在app文件夹中新建一个js文件,命名为data.js,使用module.exports暴露一个接口。

    • 之后,新建一个index.js的文件,将data.js文件引入进来,编写javascript脚本将数据渲染到页面上。

    • 之后我们来配置webpack.config.js文件,将app文件夹中的index.js文件及其所有的依赖文件(目前只有data.js)打包编译成一个压缩的javascript文件。在项目根目录新建一个命名为webpack.config.js(webpack配置文件的默认写法,当然也可以自定义,后续再说。),开始写配置项。

    • webpack.config.js配置文件写好之后,在项目根目录打开git命令行面板,输入webpack,此时dist文件夹中就生成了webpack.config.js文件中定义的index.bundle.js输出文件了。

    • 不要忘了我们的冷落了半天的index.html,在html文档的末尾添加javascript文件引用,引用刚刚新鲜出炉的index.bundle.js文件到index.html中。

    5、详解webpack.config.js配置

    · 使用命令行配置

    如果使用命令行工具(如git),命令行默认将读取webpack.config.js文件来打包源文件

    //当在命令行输入webpack时,默认使用webpack.config.js文件配置
    $ webpack

    当然我们也可以自定义webpack的配置文件,如果使用自定义配置文件,可以这样写。

    //使用自定义的webpack配置文件
    $ webpack --config webpack.config_test.js
    //--config选项告诉webpack使用webpack.config_test.js作为配置文件

    那么,这个配置文件结构是怎么样的呢?

    //webpack.config.js
    module.exports = {
    	//这里填写配置项
    }

    从上面代码可以发现,webpack.config.js文件输出了配置对象。

    · 使用node.js API配置

    如果我们使用node.js API,我们就需要通过参数来传递配置对象,如下代码。

    webpack({
    	//配置项在这里填写
    },function(){
    	//回调函数
    })

    · 更复杂的配置项

    //在命令行中编译文件使用如下命令
    $ webpack app.js app.bundle.js

    上方命令执行后,将把app.js编译成app.bundle.js文件

    使用命令行的缺点就是我们每次要编译编写的代码时,都要写这么长的命令,如果我们设置妥当的webpack.config.js配置文件,那么webpack可以监听文件改变,自动的执行编译打包命令

    //监听文件改变,自动编译
    $ webpack -w

    · 配置文件怎么写?

    首先我们必须清楚,一提到配置文件,并不一定严格按照json格式编码,所以我们不需要写非常纯正的JSON语法到配制文件中,只需要使用Javascript语法即可,因为它只是node.js的一个模块

    下面是一个非常简单的配置对象例子:

    {
    	context: __dirname + "/app",
    	entry: "./entry",
    	output: {
    		path: __dirname + "/dist",
    		filename: "bundle.js"
    	}
    }
    • context

      上下文选项用来决定根目录(即绝对路径)的入口文件

    • entry

      打包文件的入口点。

      1、如果我们给entry复赋值一个字符串:这个字符串将会在开始编译的时候被加载。

      entry: "./app.js"

      2、如果我们给entry赋值一个数组:这个数组中的所有模块在编译启动时都将被加载,对后一个数组元素将被输出。

      entry: ["./entry1.js","./entry2.js"]

      3.如果我们给entry赋值一个对象,那么我们就创建了多个入口的绑定,对象的“键”名可以在output中使用name获取到,“值”可以是一个字符串也可以是一个数组。

      {
      	entry:{
      		page1: "./page1.js",
      		page2: ["./entry1.js","./entry2.js"]
      	},
      	output:{
      		filename: "[name].bundle.js",
      		chunkFilename: "[id].bundle.js"
      	}
      }
    • output

      output选项告诉webpack如何编译文件到硬盘中,值得注意的是,虽然entry中可以使用一个对象传入多个入口点文件,但是只能给ouput设置一个配置项

      output.filename

      这里定义了输出的文件名,谨记只能填写文件名,不能包含目录。

      output.path

      这个选项告诉webpack要把编译后的文件输出到硬盘的什么位置上,filename被用来确保输在这个目录中的文件是独一无二的。

      单入口文件的写法

      {
      	entry: "./src/app.js",
      	output: {
      		path: "./bulit"
      		filename: "bundle.js"
      	}
      }

      多入口文件的写法

      {
      	entry: {
      		app: "./src/app.js",
      		search: "./src/search.js"
      	},
      	output:{
      		filename: "[name].js",
      		path: __dirname + "/built"
      	}
      }
    • output.publicPath

      publicPath用来指定输出文件的公共URL地址,当我们在浏览器浏览的时候需要配置它

      
      //config.js
      output:{
      	path: "/home/proj/public/assets",
      	publicPath: "/assets/"
      }
      //index.html
      
      	
      
      

    以上就是webpack最长用的配置项,下面是更高级的配置,比如使用ES6(ES2015)的语法需要配置babel-loader,在js中引入css样式文件如要style-loader、css-loader,开发react应用需要配置react加载器等等。

    下载loaders加载器

    下面是开发基于react的webapp时需要配置的项。

    首先要用npm下载这些模块们

    //下载babel-loader模块
    $ npm install --save-dev babel-loader
    //下载babel-preset-es2015,这样确保babel能解析ES6的最新特性
    $ npm install --save-dev babel-preset-es2015
    //下载react模块
    $ npm install -save-dev react
    //下载babel-preset-react,babel才能解析react的语法特性
    $ npm install --save-dev babel-preset-react
    

    <<<babel官网>>>

    Babel是一个转换编译器,它能将ES6转换成可以在浏览器中运行的代码。Babel是所有ES6转换编译器中与ES6规范兼容度最高的,甚至超过了谷歌创建已久的Traceur编译器。Babel允许开发者使用ES6的所有新特性,而且不会影响与老版本浏览器的兼容性。此外,它还支持许多不同的构建测试系统,使开发者很容易将它集成到自己的工具链中。

    在webpack.config.js中配置loaders

    module: {
    	loaders: [
    		{
    			test: /\.jsx$/, 
    			loader: 'babel-loader', 
    			query:{
    				presets:['es2015','react']
    			}
    		}
    	]
    },

    这样我们就能借助webpack这个神奇的工具专注于webapp开发本身,而不必为其他不必要的琐事搅扰~

    展开全文
  • vue 用webpack打包文件名添加版本号

    万次阅读 2018-12-06 09:17:12
    因此在打包的文件名中添加一个版本号以便浏览器能区分。 解决方法:找到webpack .prod.conf.js  1.定义版本变量: const Version = new Date().getTime(); // 这里使用的是时间戳 来区分 ,也可以自己定义成别的...

    因浏览器缓存原因导致vue 打包的文件 导致偶尔会出现不能即使更新最新代码。因此在打包的文件名中添加一个版本号以便浏览器能区分。

    解决方法:找到webpack .prod.conf.js

       1.定义版本变量: const  Version = new Date().getTime(); // 这里使用的是时间戳 来区分 ,也可以自己定义成别的如:1.1 

       2.修改要生成的js和css文件的配置项,把刚刚声明的版本拼接进要生成的文件名中; 

      output: {
    
            path: config.build.assetsRoot,
    
             filename: utils.assetsPath('js/[name].[chunkhash].' + Version + '.js'),
    
            chunkFilename: utils.assetsPath('js/[id].[chunkhash].' + Version + '.js')
    
        },

    然后直接 npm run build 打包后 就可以看到dist 文件里的js 文件名带上里版本号

       

     

    展开全文
  • 简单地使用webpack进行打包

    万次阅读 2018-07-04 09:49:17
    进行初始化,一路都是选择默认(回车就可以):查看初始化后的文件夹,里面只有一个json文件:4. 接下来装webpacknpm install webpack --save-dev安装完成:查看项目下,发现已经:5.然后用编译器打开当前项目...

      之前写的有些零散,现在一步步再重新写.记住: 如果你步骤对,但是始终没成功, 那么请不要烦心, 因为webpack版本4以上, 语义更加严格,命令有一些已经发生改变了,所以并不是你的问题!

    一.确保已经安装了nodeJS之后.

    二. 创建webpack-demo,我的是f盘下的,

    2.然后进入这个文件夹:

    3.进行初始化,一路都是选择默认(回车就可以):


    查看初始化后的文件夹,里面只有一个json文件:


    4.  接下来装webpack

    npm install webpack --save-dev


    安装完成:


    查看项目下,发现已经:



    5.然后用编译器打开当前项目,我的是HBuilder,如下图:

    在这个文件下创建一个demo.js文件,并创建一个函数.


    6.然后我们尝试进行打包,回到命令框

    原本输入了 webpack demo.js demo.bundle.js,然后报错了


    这是为什么呢?原因是我的webpack版本过高,原来的命令已经不适用了

    如下查询版本号:


    那应该如何解决?

    更换打包命令为: webpack demo.js -o demo.bundle.js

    其中 demo.dundle.js是打包后生成的文件的文件名

    其中的一些参数值:

    Version:webpack版本

    time:这次打包所花费的时间

    列表信息

    Asset:打包这次生成的文件

    Size:这次生成文件的大小

    Chunks:这次打包的分块

    chunk Names:这次打包的名称

    接下来查看以下项目:



    可以看到demo.js已经被打包为了demo.bundle.js文件,但是,这个并没有打包成功! 因为打包的时候没有出现红色的error了,但是还有黄色的警告.如下图.


    黄色警告:是因为webpack4引入了模式,有开发模式,生产模式,无这三个状态

    以及打开我们生成的文件,代码如下:


      可以看到末尾并没有生成我们所打包的demo.js的信息.

    黄色部分的警告的意思是,没有设置模式,有开发模式和生产模式两种,接下来,找到package.json.添加上"dev"和"build"这两个信息以及他们的值.

     

      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack --mode deveplopment",
        "build": "webpack --mode production"
      },


    先了解两个命令:

    npm run dev (开发环境输出的demo.js没有压缩),也就是这个形式的,如下图,这是平时我们写代码的形式:



    npm run build (生产模式输出的demo.js压缩过) ,如下图:


        7.全局安装webpack-cli

    npm install --save-dev webpack-cli -g

    8. 安装完成后, 输入命令  npm run dev


    看到这么多错误貌似有点头疼啊!

    原因是,你输入命令 npm run dev 的时候,会默认打包src文件夹下的index.js文件,打包完成后是main.js文件(放在dist),你有没有发现我们一开始安装webpack的时候并没有这个文件生成,所以更别提什么index.js文件了,所以这些我们需要手动创建

    我们先创建src文件.还有一个dist文件,存放默认的打包生成的文件, 然后在src里再创建index.js文件


    9.接下来,输入命令 webpack-demo,有些人奇怪,版本号怎么变了成4.14.0了,不好意思,我中途更新了,但是不要紧.


    然后看项目

    这个main.js文件就是执行npm run dev 后,默认把我们创建的index.js打包成了main.js,然后放在dist文件夹里了

    我们看一下main.js文件,很多都是打包后给生成的代码.


    然后去末尾看一下我们写的index.js被被放进去没有,从下图的代码可以看到已经包含进去了,说明我们打包成功了,为什么要做这一步呢,那当然是测试到底能不能进行打包了.


    10.到这一步了,打包demo.js(不是默认的文件的时候), 黄色警告还是出现!那么应该怎么解决呢?那就是webpack的版本问题,命令不同了

    应该使用如下命令进行打包:

     npx webpack ./demo.js -o demo.bundle.js --mode development

    很神奇吧? 黄色警告没有了!!

    查看项目,可以看到已经正确打包了:

    查看文件内容:

    我们的代码,已经被打包在末尾:



    这样,我们简单的配置就已经完成了!

    然后我们尝试用一下已经打包好的文件,新建hello.html


    可以看到已经成功打包了!!

    如果你在学习webpack的时候,出现各种问题,更多时候是因为版本的问题,并不是你的问题, 不要灰心. webpack 4语法相对来说比较严格了,根据版本去寻找解决问题的方法才更容易快速地解决问题.不过上述写的东西只是webpack的冰山一角...........


    webpack的一些相关命令

      如果我们更改我们写的代码的时候,就需要重新进行打包,那就是更改一次又手动进行打包一次,那是很麻烦的,所以我们可以使用如下命令监听这个事件,源文件一更新,就会进行自动打包.一开始watch时关闭地,我需要将它打开.

    npx webpack --mode development --watch

     注意: 这个命令只是单纯监听了默认的打包路径,也就是能监听到src下index.js的变化,也能够随将变化时进行保存刷新后其自动打包,但是,并不能监听到demo.js.  还有就是你的执行这个命令的时候,它必需属于一直监听的状态, 如果被停止了,那监听状态也停止.







    展开全文
  • webpack中alias别名配置

    万次阅读 2016-12-23 01:31:04
    webpack的alias匹配问题初现在模块开发过程中,我们可能会对可以复用的组件封装成一个可被git管控的模块,并在引用的过程中采用 带版本号的方式引用 ,这就要求我们在webpack.中添加相关alias配置
    webpack的alias匹配问题初现在模块开发过程中,我们可能会对可以复用的组件封装成一个可被git管控的模块,并在引用的过程中采用 带版本号的方式引用 ,这就要求我们在webpack.中添加相关alias配置
    
    展开全文
  • webpack的安装以及简单实用

    千次阅读 2018-04-05 21:23:12
    一、webpack是什么?WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器...
  • npm安装依赖至指定版本的方法

    万次阅读 2018-05-07 00:40:12
    先在package.json里修改好指定版本号,然后输入: npm update webpack 方法二 npm update webpack@4.7.0 会把webpack更新至指定版本,但是不会写到package.json文件里,如果需要写到package.j...
  • The CLI moved into a separate package: webpack-cli. Please install 'webpack-cli' in addition to webpack itself to use the CLI. -&gt; When using npm: npm install webpack-cli -D -&gt; When using...
  • npm安装webpack步骤及遇到的错误

    万次阅读 2018-03-14 14:49:32
    一. 步骤:1....2.npm包管理器是集成在node中的,输入 npm -v,显示npm版本号3.创建package.json文件,输入命令 npm init,一路enter,完后输入yes或Y,这样在工程目录下就会生成一个package.json...
  • webpack的安装和基本使用

    万次阅读 2018-08-23 22:05:12
    webpack概念 中文文档官网: https://www.webpackjs.com/ 网页中常用的静态资源: JS(.js .jsx .coffee .ts(TypeScript中间语言,不能自浏览器中运行,需要编译器进行编译为js语言))  CSS(.css .less .sass -&...
  • 我这边用的最新版的react脚手架,webpack版本已经升级了,去年12之前的它使用的webpack版本还是3.5的版本,如今的脚手架中config文件夹中的配置文件也少了,先上个模板, 实际开发中,难免要暴露webpack配置文件,...
  • 手把手带你安装webpack --mac电脑哦~

    千次阅读 2018-06-29 15:20:31
    1.安装node,进入nodejs官网进行下载安装包,安装即可。与常规软件安装步骤一样。2.安装完后在桌面创建一个文件夹,尽量避免使用webpack字眼。...查看一下node和npm是否安装成功,可查阅相关的版本号即为成...
  • Webpack打包

    万次阅读 2020-05-17 00:43:54
    什么是webpack 模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。 为什么使用...
  • 我们使用npm时,例如下载的webpack,使用-g全局安装了一遍后,又使用项目中安装了另一版本webpack,但是我们如何在项目中使用局部的webpack呢?首先我们进入项目,使用webpack -v查看一下版本,果然,结果是全局的...
  • 关于解决webpack版本过高导致的npm start 报错 关于create-react-app npm start webpack 报错 依赖版本4.19.1 刚开始学习react,使用create-react-app创建项目,在npm start运行的时候,控制台报错: F:\React\11-15\...
  • npm安装webpack历时两天

    千次阅读 2019-03-21 14:36:56
    1.npm安装webpack十分慢,改进:镜像改为国内淘宝源。2. 镜像修改以后,安装webpack还是没有反应,降低nodeJS版本号
  • webpack3最新版本配置研究(一)loader

    千次阅读 2017-08-27 21:50:32
    webpack这货还是挺火的,目前前端不管是react和vue都用这个打包,还是挺好用的,本文使用的时webpack2,使用的新配置,有很多旧的配置可能会出现报错,webpack3刚出希望变化不要太大!什么是WebpackWebPack可以看做是...
  • webpack配置文件webpack.config.js

    万次阅读 2017-03-01 16:02:56
    1、webpack的配置文件webpack.config.jsmodule.exports = { entry:'./src/script/main.js', output:{ path:'./dist/js', filename:'bundle.js' } }上面代码是一个最最基本的webpac配置文件,entry是指定要打包...
  • 安装webpack4.0与webpack-cli的详解

    万次阅读 2020-06-23 09:57:10
    安装webpack真的不难,甚至很简单,大家要有信心 一、首先最好去安装最新版的node.js,windows平台需要去官网下载最新的安装包去安装,命令是没有软用的。 二、本地安装 打开要操作的项目目录的终端,可以直接...
  • WebPack系列教程(四):安装

    千次阅读 2016-03-09 11:10:10
    node.jsinstall node.js node.js包含一个包管理器:npmwebpackUse webpack in a projectVersionsDev ToolsContinue reading
1 2 3 4 5 ... 20
收藏数 12,933
精华内容 5,173
关键字:

webpack 不同文件不同版本号