精华内容
参与话题
问答
  • webpack配置

    2017-11-08 18:12:23
    webpack配置 1. 安装 安装nodejs,运行命令npm intall wepack –g 或者npm install webpack –save-dev进行全局和本地安装。 安装指定版本,运行命令npm install webpack@1.12.x --save-dev 如果需要使用...

    webpack配置

    1. 安装

    安装nodejs,运行命令npm intall wepack –g 或者npm install webpack –save-dev进行全局和本地安装

    安装指定版本,运行命令npm install webpack@1.12.x --save-dev

    如果需要使用webpack开发工具,请自行安装npm install webpack-dev-server --save-dev

     

    2. 查看版本信息

    运行 npm info webpack,即可查看webpack基本信息

     

    3. 使用

    1. 首先创建一个静态文件index.html,在静态文件里面引入bundle.js

    2. 创建一个entry.js文件,写一个alert(‘webpack’);

    3. 运行命令 webpack entry.js bundle.js

    4. 这样bundle.js就可以生成了

     

    5. 运行index.html

      

    6. 添加一个模块,并修改entry.js

       1. 新建module.js,写入module.exports = 'It works from module.js.'

       2. entry.js添加如下代码alert(require('./module.js'))

       3. 重新编译bundle.js,运行index.html

        

    4. 原理

    Webpack 会分析入口文件,解析包含依赖关系的各个文件。这些文件(模块)都打包到 bundle.js Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时,会先执行 entry.js 中的代码,其它模块会在运行 require 的时候再执行。

    编译后文件如下图

     

     


    (通过对象的赋值和引用,形成一个调用关系链

    5. Loader

    1. Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换

    2. Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为参数,返回转换的结果。这样,我们就可以通过 require 来加载任何类型的模块或文件,比如 CoffeeScriptJSXLESS 或图片。

    3. Loader 本身也是运行在 node.js 环境中的 JavaScript 模块,它通常会返回一个函数。大多数情况下,我们通过 npm 来管理 loader,但是你也可以在项目中自己写 loader 模块。正是由于loader运行在node环境里面,所loader读取文件变得轻而易举

    4. 按照惯例,而非必须,loader 一般以 xxx-loader 的方式命名,xxx 代表了这个 loader 要做的转换功能,比如 json-loader。在引用 loader 的时候可以使用全名 json-loader,或者使用短名 json。这个命名规则和搜索优先级顺序在 webpack resolveLoader.moduleTemplates api 中定义。Default: ["*-webpack-loader", "*-web-loader", "*-loader", "*"]

    5. 安装 loader

    1. 运行npm intall css-loader style-loader

    2. 新建index.css文件,指定背景色为green

    3. 修改entry.js文件require("!style-loader!css-loader!./style.css"),载入style-loader css-loader

    4. 重新打包编译bundle.js,运行index.html

     

     

    5. 如果每次 require CSS 文件的时候都要写 loader 前缀,是一件很繁琐的事情。我们可以根据模块类型(扩展名)来自动绑定需要的 loader

    1. entry.js 中的 require("!style!css!./style.css") 修改为 require("./style.css")2. 运行$webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'或者webpack entry.js bundle.js --module-bind "css=style-loader!css-loader",效果是一样的

    6. 配置文件

    1. Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行。默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一个 json 格式的配置信息对象,或者通过 --config 选项来指定配置文件。

    2. 通过npm init,我们来创建package的基本信息

    {

      "name": "webpack",

      "version": "1.0.0",

      "description": "'webapck demo'",

      "main": "bundle.js",

      "dependencies": {

        "css-loader": "^0.28.0",

        "style-loader": "^0.16.1"

      },

      "devDependencies": {},

      "scripts": {

        "test": "'test'"

      },

      "keywords": [

        "'webpack'"

      ],

      "author": "djl",

      "license": "ISC"

    }

    3. 如上图所示,为安装初始化后的配置信息,我们看到,没有webpckdependencies依赖,是因为我们安装的webpack为全局的,通过wbpack -v我们来查看一下webpack的版本信息,添加本地环境依赖

     

    {

      "name": "webpack",

      "version": "1.0.0",

      "description": "'webapck demo'",

      "main": "bundle.js",

      "dependencies": {

        "css-loader": "^0.28.0",

        "style-loader": "^0.16.1",

        "webpack": "^2.3.3"

      },

      "devDependencies": {},

      "scripts": {

        "test": "'test'"

      },

      "keywords": [

        "'webpack'"

      ],

      "author": "djl",

      "license": "ISC"

    }

    4. 运行 npm install 即可安装本地webpack

    5. 创建webpack.config.js文件,放置到根目录下写入如下信息

    var webpack = require('webpack') //引入webpack模块

     

    module.exports = {//webpack导出模块

      entry: './entry.js',//入口文件,也就是我们的entry.js文件,只有这一个

      output: {//输出目录配置

        path: __dirname, //当前目录导出文件,如果对node不太熟悉,自行脑补

        filename: 'bundle.js'//导出文件名

      },

      module: { 

        loaders: [//webpackloader模块配置

          {test: /\.css$/, loader: 'style-loader!css-loader'}//test正则匹配css文件,loaderloader名称

        ]

      }

    }

    6. 最后entry.js我们只需要require(‘./index.css’),重新运行编译bundle.js,即可

    7. 插件

      1. 插件可以完成更多 loader 不能完成的功能。

      2.插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。Webpack 本身内置了一些常用的插件,还可以通过 npm 安装第三方插件

      3. 我们BannerPluigin为例,来给输出文件添加注释信息

      4. 修改webpack.config.js文件,在modlue对象下添加插件如下

         module: {

           loaders: [

             {test: /\.css$/, loader: 'style-loader!css-loader'}

           ]

      },

      plugins: [

           new webpack.BannerPlugin('This file is created by djl')

          ]

    }

    5. 重新编译bundle.js,打开文件,我们已经看到注释信息了

       

    8.开发环境

      1. 当项目逐渐变大,webpack 的编译时间会变长,可以通过参数让编译的输出内容带有进度和颜色webpack --progress --colors

      2. 如果不想每次修改模块后都重新编译,那么可以启动监听模式。开启监听模式后,没有变化的模块会在编译后缓存到内存中,而不会每次都被重新编译,所以监听模式的整体速度是很快的。webpack --progress --colors –watch

      3. 使用 webpack-dev-server 开发服务是一个更好的选择。它将在 localhost:8080 启动一个 express 静态资源 web 服务器,并且会以监听模式自动运行 webpack,在浏览器打开 http://localhost:8080/ http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出,并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。

    安装服务工具npm install webpack-dev-server –g  运行webpack-dev-server --progress –colors

     

    9. webpack补充说明

      1.entry

    entry可以是个字符串或数组或者是对象。  

    entry是个字符串的时候,用来定义入口文件:

    entry: './js/main.js'

     

    entry是个数组的时候,里面同样包含入口js文件,另外一个参数可以是用来配置webpack提供的一个静态资源服务器,webpack-dev-serverwebpack-dev-server会监控项目中每一个文件的变化,实时的进行构建,并且自动刷新页面:

    entry: [

         'webpack/hot/only-dev-server',

         './js/app.js'

    ]

     

    entry是个对象的时候,我们可以将不同的文件构建成不同的文件,按需使用,比如在我的hello页面中只要\引入hello.js即可:

    entry: {

         hello: './js/hello.js',

         form: './js/form.js'

     }

     2.output

    output参数是个对象,用于定义构建后的文件的输出。其中包含pathfilename

    当我们在entry中定义构建多个文件时,filename可以对应的更改为[name].js用于定义不同文件构建后的名字。

    publicPathpublicPath”项则被许多Webpack的插件用于在生产模式下更新内嵌到csshtml文件里的url值。

    pathpath”仅仅告诉Webpack结果存储在哪里

     

    3. resolve 

    webpack在构建包的时候会按目录的进行文件的查找,resolve属性中的extensions数组中用于配置程序可以自行补全哪些文件后缀:

    resolve:{

         extensions:['','.js','.json']

     }

    4. externals 

    当我们想在项目中require一些其他的类库或者API,而又不想让这些类库的源码被构建到运行时文件中,这在实际开发中很有必要。此时我们就可以通过配置externals参数来解决这个问题:

    externals: {

         "jquery": "jQuery"

     }

    5. loader

     loader的参数随插件的不同而不同,具体请参考具体的插件设置

    展开全文
  • webpack 配置

    2017-02-17 15:55:37
    转自:http://blog.csdn.net/kun5706947/article/details/52596766
    展开全文
  • webpack配置文件

    2019-06-05 14:09:21
    webpack配置文件 webpack默认配置文件:webpack.config.js 可以通过webpack --config指定配置文件

    webpack配置文件

    1. webpack默认配置文件:webpack.config.js
    2. 可以通过webpack --config指定配置文件
    3. 在这里插入图片描述
    4. 零配置的webpack
    展开全文
  • webpack 配置文件

    2018-05-19 23:15:22
    webpack 配置文件 配置文件 webpack.config.js // webpack.config.js 是 webpack 打包构建的配置文件 // 我们使用它的第一步就是导出一个对象 // 1. 配置文件是给 webpack 打包用的 // 如果有,就以配置文件的...

    webpack 配置文件

    配置文件 webpack.config.js

    // webpack.config.js 是 webpack 打包构建的配置文件
    // 我们使用它的第一步就是导出一个对象
    // 1. 配置文件是给 webpack 打包用的
    //    如果有,就以配置文件的配置为准
    //    如果没有,则都走默认
    // 2. 该文件就是用来被 Node 执行的
    //     因为 webpack 打包构建需要操作文件,webpack 也是基于 Node 开发的
    // 3. webpack 打包的时候会自动加载当前模块,读取其中导出的对象,拿到对象中配置项去进行自定义打包构建
    // 4. 导出的配置对象中只能按照 webpack 给定的属性来配置,不能乱写
    // 5. webpack 打包的时候会自动来读取 webpack.config.js
    //    如果想要修改这个文件名,
    //    则需要在执行打包命令的时候加上 --config 配置文件名
    //    例如:npx webpack --config webpack.config.js
    // 6. 但是如果每一次加上这一堆的选项很难记住
    //    所以我们推荐把打包的命令配置到 package.json 文件的 scripts 选项中把该命令起个别名存起来
    // 7. 接下来我们就可以开心的 npm run build   
    // 8. 提示,当你把 npx webpack --config webpack.config.js 配置到 scripts 选项中之后,就不需要使用 npx
    //    也就是说我们可以:"build": "webpack --config webpack.config.js"
    //    由于 webpack.config.js 就是默认文件名吗,所以我们可以:
    //    "build": "webpack"
    //    虽然简单,我们也这么做,因为接下来一步一步的扩展了
    const path = require('path')
    
    module.exports = {
      entry: './src/main.js', // 指定打包的入口
      output: { // 指定打包的出口
        path: path.join(__dirname, './dist/'), // 指定打包的结果文件存放的目录路径(注意:必须是绝对路径!)
        filename: 'bundle.js' // 指定打包的结果文件名
      }
    }
    

    npm scripts

    {
      "name": "demo0",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "dependencies": {
        "jquery": "^3.3.1"
      },
      "devDependencies": {
        "webpack": "^4.5.0",
        "webpack-cli": "^2.0.14"
      }
    }
    
    展开全文
  • webpack配置hot是否需要配置HotModuleReplacementPlugin webpack官方文档(devserverhot)中介绍,使用hmr的时候,需要满足两个条件: 配置devServer.hot为true 配置webpack.HotModuleReplacementPlugin插件 Note...
  • Storybook有一个默认的适合(suits)大型项目开发的webpack配置,假如你使用react app,他类似于创建一个react app的配置,并经过调整(tweaked ),使其与vue cli的webpack配置非常相似 开始学习Storybook配置 学习内容...
  • vue-cli3搭建项目之webpack配置

    万次阅读 多人点赞 2019-02-14 13:17:10
    vue-cli3搭建完整项目之webpack配置 ​ 前面篇介绍了项目初始化,下面就要开始对项目webpack进行配置,由于vue-cli3将webpack的基础配置全部内嵌了,这就导致我们初始化项目完成之后发现原先的webpack的config配置...
  • webpack配置文件写法

    2019-12-06 19:02:49
    1.什么是webpack配置文件? 我们在打包JS文件的时候需要输入: npx webpack index.js 这句指令的含义是: 利用webpack将index.js和它依赖的模块打包到一个文件中 其实在webpack指令中除了可以通过命令行(终端)的方式...
  • webpack配置vue

    2018-02-03 19:15:16
    1、项目根目录初始化package.json: npm init 2、下载css与style的...npm install css-loader style-loader --save-dev3、下载babel,webpack配置es6语法 npm install babel-core babel-loader babel-plugin-transfo
  • webpack配置 github详细代码地址:https://gitee.com/CarrieProject/weback4_configuration webpack环境安装 创建webpack-course文件  在这个webpack-course文件里创建3个文件  mkdir src dist config ls...
  • vue-cli3 的webpack配置

    万次阅读 2018-11-23 14:15:26
    @vue/cli的webpack配置 查看默认配置 因为Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的, 把一些常用的内容配置好. vue-cli-service 暴露了 inspect 命令用于审查解析好的 webpack 配置。 vue inspect &...
  • 代码压缩前大小 安装代码压缩插件 npm i -D uglifyjs-...webpack配置 const path = require('path'); const webpack = require('webpack'); const UglifyJsPlugin = require('uglifyjs-webpack-plugin')...
  • webpack配置热加载

    2019-07-09 02:31:40
    webpack配置热加载 热加载工具,自动编译,先全局安装,再项目安装 cnpm install webpack-dev-server -g cnpm install webpack-dev-server --save-dev 在webpack.config.js中设置配置属性 devServer: { content...
  • Webpack配置Vue热更新

    2019-11-29 13:56:30
    Webpack配置Vue热更新 需要的包 cnpm i vue webpack webpack-cli webpack-dev-server html-webpack-plugin clean-webpack-plugin style-loader css-loader vue-loader -D npm i vue webpack webpack-cli webpack-...
  • 面试被问到webpack配置

    2020-04-15 21:37:05
    面试被问到webpack配置安装webpackpackage.json创建入口文件webpack配置配置执行命令加入插件 当时太悲剧了,这一块太久没注意,一直都是做项目写业务页面比较多,竟然忘记了,还乱答一通,还说要配置vue-loader、...
  • vue-cli中webpack配置之webpack.prod.conf.js 本文中内容仅限于使用vue-cli的2.8.x版本生成的webpack项目 在这个文件中,主要做了以下几项配置 合并基础的webpack配置 使用styleLoaders 配置webpack的输出 ...
  • vue webpack配置跨域

    2019-08-20 11:24:06
    一般不是同源策略都需要跨域,本人用的是webpack配置代理跨域,下面配置过程: 首先,找到config下 的index.js 然后 index.js打开,找到proxyTable进行配置 下面是我配置要访问的服务器地址,都附有解释 在...
  • 在react中安装create-react-app脚手架新建项目,但是新建的项目中没有配置文件。...可以通过以下命令将webpack配置文件暴露出来 npm run eject 或 yarn eject 这时候打开根目录会发现多了con...
  • webpack配置本地服务器 今天学习了webpack的本地服务器的配置,配置还是简单好学的,在这过程中由于自己的粗心大意写错了一个单词导致了报错,找了好久才发现问题,忘小伙伴们敲代码的过程中一定要仔细,千万不要向...
  • webpack配置解决跨域

    千次阅读 2018-03-28 17:02:55
    webpack 配置proxy: { '/api/*': { target: 'http://localhost:8888/', // 目标服务器地址 secure: false, // 目标服务器地址是否是安全协议 changeOrigin: true, // 是否修改来源, 为true时会让目标服务器以为...
  • webpack 配置错综复杂,每次独立配置也会让我的心情跟着复杂起来。而今再也受不了,拿来即用可以,拿来受罪可不行。便在这里记录一下用 webpack 配置 react 开发的问题和实现过程。
  • Webpack配置详解(package.json/webpack.config.js详细配置 ) webpack安装 package.json配置以及模块安装 webpack.config.js配置 开启webpack-dev-server服务 热替换插件的安装以及配置 开启自动打开浏览器插件的...
  • webpack配置historyApiFallback的坑

    千次阅读 2019-05-16 10:04:49
    webpack配置historyApiFallback的坑 Error in event handler for (unknown): TypeError: Cannot read property 'join' of undefined 博主在使用webpack做spa(单页面应用)的时候出现了404错误,原因很简单是因为...
  • 调整 webpack 配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象,该对象将会被webpack-merge合并入最终的 webpack 配置。有些 webpack 选项是基于vue.config.js中的值设置的,所以不能直接...
  • vscode 中智能化自动提示webpack配置项 在这里,我想跟你分享我在编写 Webpack 配置文件时用过的一个小技巧,因为Webpack 的配置项比较多,而且很多选项都支持不同类型的配置方式。如果你刚刚接触 Webpack 的配置,...
  • webpack配置postcss-loader无效

    千次阅读 2020-05-31 23:20:12
    webpack配置postcss-loader无效 文档配置如下: postcss.config.js module.exports = { plugins: [ require('autoprefixer') ] } webpack.config.js const path = require('path'); const webpack = ...

空空如也

1 2 3 4 5 ... 20
收藏数 30,261
精华内容 12,104
关键字:

webpack配置