精华内容
下载资源
问答
  • webpack目录格式

    2018-03-01 10:29:27
    默认会搜索当前目录webpack.config.js。这个文件是一个node.js模块,返回一个json格式的配置对象,或者通过--config选项来指定配置文件。 //创建webpack.config.jsvar webpack = require('webpack...

    webpack.config.js配置文件

    1、基本配置
    webpack在执行时,除在命令行传入参数,还可以通过指定的配置文件来执行。默认会搜索当前目录下webpack.config.js。这个文件是一个node.js模块,返回一个json格式的配置对象,或者通过--config选项来指定配置文件。
     
    //创建webpack.config.js
    var webpack = require('webpack');
    module.exports = {
         entry:'./entry.js', //入口文件
         output:{
              //node.js中__dirname变量获取当前模块文件所在目录的完整绝对路径 
              path:__dirname, //输出位置
              filename:'build.js' //输入文件
         },
         module:{
              loaders:[
                   {
                       test:/\.css$/,//支持正则
                       loader:'style-loader!css-loader' 
                   }
              ]
         },
    //其他解决方案配置
    resolve: {
        extensions: ['', '.js', '.json', '.css', '.scss']//添加在此的后缀所对应的文件可以省略后缀
    },
         //插件
         plugins:[
              new webpack.BannerPlugin('This file is created by ly')
         ]
    }
     
    //entry.js中引入css模块:
    require('./style.css');
     
    ::运行
    webpack
     
    2、plugins 插件
    可以通过npm安装第三方插件,如:BannerPlugin的作用是给输出的文件头部添加注释信息。
     
    3、开发环境
     
    ::编译输出内容带进度和颜色
    webpack --progress --colors
     
    ::启动监听模式(没有变化的模块会在编译后缓存大内存中,不会每次都被重新编译)
    webpack --watch
    webpack -w
     
    ::使用开发服务(它将在localhost:8080启动一个express静态资源web服务器。并启动监听模式自动webpack,在浏览器打开http://localhost:8080/,就可以浏览项目页面,并通过一个socket.io服务实时监听变化并自动刷新页面)
    npm install webpack-dev-server -g
     
    4、启动webpack-dev-server
    注意:在启动了webpack-dev-server后,编译后的文件并没有输出到webpack.config.js中配置的output输出目标文件夹中,而是将实时编译后的文件保存在内存中。
    例子:
     
    //目录结构
    myapp
        |__dist
        |   |__styles
        |   |__js
        |       |__bundle.js
        |   |__index.html
        |__src
        |   |__component
        |   |__index.js
        |__node_modules
        |__package.json
        |__webpack.config.js
     
    //webpack.config.js
    var webpack = require('webpack');
    var path = require('path');
    module.exports = {
        entry:'./src/index.js',
        output:{
            path:path.resolve(__dirname, './dist/'),
            filename:'build.js'
        },
        //设置开发者工具的端口号,不设置则默认为8080端口
        devServer: {
            inline: true,
            port: 8181
        },
        module:{
            loaders:[
                {
                    test:/\.js?$/,
                    exclude:/node_modules/,
                    loader:'babel-loader',
                    query:{
                        presets:['es2015','react']
                    }
                },
                {
                    test:/\.css$/,
                    loader:'style-loader!css-loader'
                }
            ]
        }
    };
     
    //package.json
    {
      "name": "myapp",
      "version": "1.0.0",
      "description": "",
      "main": "build.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server --devtool eval-source-map --progress --colors --hot --inline --content-base ./dist",
        "build": "webpack --progress --colors"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "babel-core": "^6.23.1",
        "babel-loader": "^6.4.0",
        "babel-preset-es2015": "^6.22.0",
        "jsx-loader": "^0.13.2",
        "react": "^15.4.2",
        "react-dom": "^15.4.2",
        "webpack": "^2.2.1",
        "webpack-dev-server": "^2.4.1"
      },
      "dependencies": {
        "jquery": "^3.1.1"
      }
    }
     
    <!--index.html-->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
    </head>
    <body>
    <div id="app"></div>
    <script src="build.js"></script>
    </body>
    </html>
     
    ::安装所有依赖
    npm install
    ::运行
    npm run dev
     
    最后在浏览器中打开:http://localhost:8181/index.html
     
    详解package.json中命令:
     
    webpack-dev-server   //启动webpack-dev-server
    --progress --colors    //打包进行显示颜色
    --hot  //开启模块热修复功能
    --content-base ./dist   //设置webpack-dev-server运行的根目录是 ./dist
    --inline  //使用inline的方式进行页面自动刷新
    --quiet  //控制台中不输出打包信息
    --compress  //开启gzip压缩
     
    webpack-dev-server支持两种自动刷新的方式:
    ①Iframe mode
    在网页中嵌套一个iframe,将自己的应用注入都这个iframe中,每次文件修改后都是这个iframe进行了reload
    ②inline mode
    也是自动便也打包刷新
     
    展开全文
  • vue-cli 3.0配置webpack目录别名alias

    千次阅读 2019-02-15 17:06:02
    最近用vue脚手架新建工程的时候,发现vue-cli提供的是3.0.0-beta.6版本,安装完成之后也找不到config、build等目录,不懂要从哪里入手配置别名alias 安装 npm install -g @vue/cli # or yarn global add @vue/cli...

    最近用vue脚手架新建工程的时候,发现vue-cli提供的是3.0.0-beta.6版本,安装完成之后也找不到configbuild等目录,不懂要从哪里入手配置别名alias

    安装

    npm install -g @vue/cli
    # or
    yarn global add @vue/cli
    
    vue create my-project
    

    启动

    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
    }
    

    配置

    在根目录新建vue.config.js

    const path = require('path');
    function resolve (dir) {
        return path.join(__dirname, dir)
    }
    module.exports = {
        lintOnSave: true,
        chainWebpack: (config)=>{
            config.resolve.alias
                .set('@$', resolve('src'))
                .set('assets',resolve('src/assets'))
                .set('components',resolve('src/components'))
                .set('layout',resolve('src/layout'))
                .set('base',resolve('src/base'))
                .set('static',resolve('src/static'))
        }
    }
    

    参考

    vue-cli configuration
    webpack-chain

    谢谢您的品读,此处抛砖引玉,希望大家共同探讨学习。

    展开全文
  • 配置webpack目录别名alias 使用vue.config.js(根目录,默认不存在,需要创建)来配置webpach的一些配置项 链式操作 webpack-chain 尝试通过提供可链接或流畅的API来创建和修改webpack配置来改进此过程。 ...

    vue-cli 3.0安装

    安装命令:
    npm install -g @vue/cli
    
    如果已经全局安装了旧版本的 vue-cli (1.x 或 2.x),
    卸载命令:
    npm uninstall vue-cli -g
    
    检查其版本是否正确 (3.x):
    vue --version
    vue -V
    
    创建一个新项目:
    vue create hello-world
    
    windows上的Git Bash交互不是很友好,需要通过
    winpty vue.cmd create hello-world
    启动上下键选择,space键选中
    
    现有的项目中安装插件:vue-cli-plugin-cube-ui
    vue add cube-ui

    启动

    启动项目:
    npm run serve

    配置webpack目录别名alias

    使用vue.config.js(根目录,默认不存在,需要创建)来配置webpach的一些配置项

    链式操作

    webpack-chain尝试通过提供可链接或流畅的API来创建和修改webpack配置来改进此过程。

    设置别名的结构:
    config.resolve.alias
      .set(key, value)
      .set(key, value)
      .delete(key)
      .clear()
    const path = require('path')
    function resolve(dir) {
      return path.join(__dirname, dir)
    }
    module.exports = {
      chainWebpack(config) {
        config.resolve.alias
          .set('components', resolve('src/components'))
          .set('common', resolve('src/common'))
          .set('api', resolve('src/api'))
      }
    }

    参考:webpack-chain

    注意:

    各类非 js 直接引用(import require)静态资源,依赖相对路径加载问题,都可以用 ~ 语法完美解决;

     

    展开全文
  • Webpack

    2021-03-21 15:41:29
    文章目录一、什么是Webpack二、Webpack安装1、全局安装2、安装后查看版本...webpack目录下创建配置文件webpack.config.js2、命令行执行编译命令3、webpack目录下创建index.html4、浏览器中查看index.html五、CSS打包1、...

    一、什么是Webpack

    ​ Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

    ​ 从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。

    what-is-webpack

    二、Webpack安装

    1、全局安装

    npm install -g webpack webpack-cli
    

    image-20210320224911102

    2、安装后查看版本号

    webpack -v
    
    image-20210320224948252

    三、初始化项目

    1、创建webpack文件夹

    进入webpack目录,执行命令

    npm init -y
    

    image-20210320230711069

    2、创建src文件夹

    image-20210320230800584

    3、src下创建common.js

    exports.info = function (str) {
        //在浏览器中输出
        document.write(str);
    }
    

    4、src下创建utils.js

    exports.add = function (a, b) {
        return a + b;
    }
    

    5、src下创建main.js

    const common = require('./common');
    const utils = require('./utils');
    
    common.info('Hello world!' + utils.add(100, 200));
    

    四、JS打包

    1、webpack目录下创建配置文件webpack.config.js

    ​ 以下配置的意思是:读取当前项目目录下src文件夹中的main.js(入口文件)内容,分析资源依赖,把相关的js文件打包,打包后的文件放入当前目录的dist文件夹下,打包后的js文件名为bundle.js

    image-20210320231300400

    2、命令行执行编译命令

    webpack #有黄色警告
    webpack --mode=development #开发环境
    webpack --mode=production  #生产环境
    #执行后查看bundle.js 里面包含了上面两个js文件的内容并惊醒了代码压缩
    

    也可以配置项目的npm运行命令,修改package.json文件

    "scripts": {
        //...,
        "dev": "webpack --mode=development"
    }
    

    运行npm命令执行打包

    npm run dev
    

    3、webpack目录下创建index.html

    引用bundle.js

    <body>
        <script src="dist/bundle.js"></script>
    </body>
    

    4、浏览器中查看index.html

    image-20210320232918210

    五、CSS打包

    1、安装style-loader和 css-loader

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

    Loader 可以理解为是模块和资源的转换器。

    ​ 首先我们需要安装相关Loader插件,css-loader 是将 css 装载到 javascript;style-loader 是让 javascript 认识css

    npm install --save-dev style-loader css-loader 
    

    image-20210321151024830

    2、修改webpack.config.js

    在module中增加规则

    const path = require("path"); //Node.js内置模块
    module.exports = {
        entry: './src/main.js', //配置入口文件
        output: {
            path: path.resolve(__dirname, './dist'), //输出路径,__dirname:当前文件所在路径
            filename: 'bundle.js' //输出文件
        },
        module: {
            rules: [
                {
                    test: /\.css$/,    //打包规则应用到以css结尾的文件上
                    use: ['style-loader', 'css-loader']
                }
            ]
        }
    }
    

    3、在src文件夹创建style.css

    image-20210321152250322

    4、在main.js中引入css

    image-20210321152354731

    5、执行打包命令

    webpack #有黄色警告
    webpack --mode=development #开发环境
    webpack --mode=production  #生产环境
    #执行后查看bundle.js 里面包含了上面两个js文件的内容并惊醒了代码压缩
    

    也可以配置项目的npm运行命令,修改package.json文件

    "scripts": {
        //...,
        "dev": "webpack --mode=development"
    }
    

    运行npm命令执行打包

    npm run dev
    

    image-20210321152829368

    页面效果:

    image-20210321153017250

    展开全文
  • webpack概念系列目录 概念
  • Webpack 工程目录解析

    千次阅读 2018-09-25 23:00:22
    目录结构 package.json { "name": "webpack_environment", "version": "1.0.0", "description": "A webpack environment test", "author&...
  • webpack

    千次阅读 多人点赞 2019-10-17 21:30:04
    文章目录webpack1. webpack1.1 静态资源多了带来的问题1.2 如何解决上述问题2. webpack的使用2.1 webpack的安装2.2 webpack的使用2.2.1 项目搭建思路2.2.2 webpack的作用2.3 webpack的配置文件webpack.config.js2.4 ...
  • 将单个文件或整个目录(已存在)复制到构建目录。 入门 首先,您需要安装copy-webpack-plugin : npm install copy-webpack-plugin --save-dev 然后将插件添加到您的webpack配置中。 例如: webpack.config.js ...
  • WebPack

    千次阅读 2019-07-11 15:10:25
    WebPack 入门
  • 接着,进入到 webpack 目录,通过 npm 装包 然后,新建一个自己的项目,用来测试 webpack 所以,有基本目录结构: webpack-source-code ├── webpack-master // webpack 源码 ├── myProgram │ ├── src │ ...
  • 将单个文件或整个目录复制到输出目录(outpath); npm安装插件: npm install copy-webpack-plugin -D 需要输出的文件夹为:存放静态资源图片的images文件夹: 2. 在webpack配置文件中配置,将images文件输出到...
  • Webpack的基本使用

    千次阅读 多人点赞 2020-06-02 09:05:28
    一、什么是Webpack Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。 从图中我们可以看出,Webpack 可以将...进入webpack目录,执行命
  • 配置webpack设置根目录

    千次阅读 2020-04-21 18:35:31
    在项目当中,我们可能正在大量使用相对路径,但是相对路径存在一个明显的问题:当文件目录发生变化时,需要频频修改相对路径。一个比较常见的情形是:在React开发中,我们经常需要导入组件,而组件一般都是放在...
  • webpack之自动清理构建目录产物 手动清理 rm -rf ./dist 使用clean-webpack-plugin插件
  • webpack之清除构建目录

    2019-12-02 16:04:27
    安装:cnpm iCleanWebpackPlugin -D ...使用clean-webpack-plugin(默认会删除output指定的输出目录) 我在使用的过程中遇到了一个坑,先把报错信息给大家看一下: “TypeError: CleanWebpackPlu...
  • 由于每次执行构建命令,webpack 都会在 dist 目录生成文件,导该目录 文件夹相当杂乱。 通常,在每次构建前清理 dist 目录,是比较推荐的做法,因此只会生成用到的文件。通过 clean-webpack-plugin 插件完成自动清理...
  • webpack之清除dist目录(三)

    千次阅读 2018-03-14 16:24:32
    npm install clean-webpack-plugin --save-dev 二、配置修改 //用于在构建前清除dist目录中的内容 const CleanWebpackPlugin = require('clean-webpack-plugin'); //清除dist构建目录文件 plugins.push(...
  • 文章目录 成功后的效果图 进行 如下设置,正确配置 webpack 目录即可
  • move-webpack-plugin Webpack plugin to move around files and directories. 在 webpack 编译前 或 编译后 执行文件移动操作。 安装 npm i move-webpack-plugin 用法 import MoveWebpackPlugin from 'move-webpack-...
  • webpack搭建简单的多页面应用

    万次阅读 2017-08-20 12:28:14
    2.在webpack目录下新建webpack.config.js文件,因为webpack打包时会自动查找根目录下webpack.config.js文件,若想自定义webpack的文件,可以使用 webpack --config参数 3.安装html-webpack-plugin插件 在终端中输入...
  • 1.增加alias属性 在webpack.config.js文件中 const path=require('path') module.exports={ resolve:{ //给src取别名 alias:{ '@':path.join(__dirname,'./src') } } } 2.使用别名 在引用src目...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 90,325
精华内容 36,130
关键字:

webpack目录