webpack 多出口文件 文件夹_删除文件夹一个文件 webpack - CSDN
精华内容
参与话题
  • Webpack文件输出到个目录

    千次阅读 2016-05-04 10:56:42
    entry = { "button": "demo/button/index.jsx"), "grid": "demo/grid/index.jsx") }, output: { path: 'dist/js', filename: "[name].js", chunkFilename: "[name].js" }, plugins: [ new
    entry = {
        "button": "demo/button/index.jsx"),
        "grid": "demo/grid/index.jsx")
    },
    output: {
        path:  'dist/js',
        filename: "[name].js",
        chunkFilename: "[name].js"
    },
    plugins: [
        new CommonsChunkPlugin("common.js", ["button", "grid"])
    ]

    output中的[name]对应于entry中的key值,因此生成后的文件名是button.js和grid.js。

    展开全文
  • 一、文件打包在一起(打包成一个文件),例如将这两个js文件打包成一个js文件:(个入口,一个出口webpack.config.js配置如下:entry入口,数组形式,按顺序打包,output出口,然后运行:npm run build ...

    一、多个文件打包在一起(打包成一个文件),例如将这两个js文件打包成一个js文件:(多个入口,一个出口)


    webpack.config.js配置如下:entry入口,数组形式,按顺序打包,output出口,


    然后运行:npm run build (备注:在package.json文件scripts中配置如下即可)


    运行完命令后,如下图,证明打包完成


    打包好的boundle.js内容如下图:



    二、多个入口,多个出口:

    webpack.config.js按照如下配置


    运行npm run build,成功打包成两个js,如下图:



    三、html-webpack-plugin:

    **注意:

    1、先安装依赖

    webpack(npm i webpack  -D),webpack-cli(npm i webpack-cli -D)

    2、安装html-webpack-plugin

          npm i html-webpack-plugin  -D

    3、引入、使用


    模板页面标题配置:


    运行npm run build ,生成结果如下图




    参考:https://www.npmjs.com/package/html-webpack-plugin

    展开全文
  • ES6+React+Webpack初步构建项目流程

    千次阅读 2016-04-21 20:16:38
    当我们打算使用Webpack构建工具,React和ES6来开发项目的时候,构建这么一套自动化的项目的流程见下:   ...然后我们新建一个文件夹用来存放整个项目文件。为了可以在项目中使用webpack,我们需

             当我们打算使用Webpack构建工具,React和ES6来开发项目的时候,构建这么一套自动化的项目的流程见下:

     

    第一步:webpack是一个基于node的项目,我们使用命令行对webpack进行全局的安装

    npm install webpack –g。可以通过webpack  –h来查看安装的版本信息。然后我们新建一个文件夹用来存放整个项目文件。为了可以在项目中使用webpack,我们需要将webpack安装到当前的项目依赖中,在新建的文件夹下输入:npm init(安装webpack依赖,会在对应文件夹下生成package.json),然后使用npm install webpack –save-dev将webpack的模块添加到本地项目中。此时会生成一个本地的模块目录node_modules。如下图所示:


    第二步:在新建的文件下目录下创建你的工程目录结构。为了演示react和es6,我这里需要展示一个背景色为橙色,只显示一段文字:hello!的工程。首先创建一个index.html,入口文件app.js,被引用的UI模块文件hello.js以及对应的样式文件style.css。目录结构如下所示:

     

    第三步:这里定义的入口js文件app.js中可以使用es6中的import引用hello.js中的UI组件。同时也可以使用require来引入定义的style.css文件用来改变元素的样式属性。对应的在hello.js中可以使用react创建对应的功能模块的组件,并通过export导出接口给其他文件使用。



    第四步:创建并使用webpack最重要的配置文件webpack.config.js。这个文件主要定义webpack构建工具识别的入口文件entry,出口文件output(这里的出口文件主要是用来被index.html中的script标签进行引用)以及webpack为了打包对应css,img,es6所需要的加载器loader。这里的webpack.config.js是webpack默认运行时加载的配置文件。


    TIPS:这里为了加载使用各个loader,比如说css-loader,babel-loader,style-loader等等加载器,需要我们在开发项目之前进行安装。有两个安装方式:

    A.     可以直接在命令行输入对应安装命令:npm install style-loader –save-dev之类

    B. 直接在package.json中的devDependencies定义所需要使用的loader加载器名字,然后在命令行直接输入npm install进行对应loader的安装。
    
    
    
    
    这里为了可以使用webpack的更具文件的改动直接自动刷新浏览器的功能,安装并使用了webpack-dev-server;注意在使用webpack-devserver的时候一定要在后面加上参数—hot和—inline才能达到自动刷新浏览器的目的。
    
    

     

    展开全文
  • webstorm+webpack创建项目

    万次阅读 2018-09-04 11:10:32
    2.在项目下创建文件夹文件 a.创建css文件夹存放index.css文件文件内容如下:   p{ font-size: 24px; padding:0 100px; color:blue; } p:nth-of-type(2) { font-size: 30px; text-align: cent...

    1.使用webstrom创建一个空的项目

    2.在项目下创建文件夹和文件

    a.创建css文件夹存放index.css文件,文件内容如下:

     

    p{
        font-size: 24px;
        padding:0 100px;
        color:blue;
    }
    p:nth-of-type(2) {
        font-size: 30px;
        text-align: center;
        color:black;
        font-family:"幼圆";
    }
    p:nth-of-type(3) {
        color: red;
        font-weight:bold;
        text-align: right;
    }


    b.创建index文件夹,存放index.html文件,文件内容如下:

     

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>myFirstDemo</title>
    </head>
    <body>
    <div id="app"></div>
    <script src="bundle.js"></script>
    </body>
    </html>


    c.创建data文件夹存放index.json文件,文件内容如下:

     

     

    {
      "name":"hello webpack",
      "content":"this is my first demo",
      "start":"Ready Go!"
    }


    d.创建jsproject文件夹存放createdom.js和entry.js文件。

     

    entry.js

     

    require('./../css/index.css');
    var createdom = require('./createdom.js');
    document.getElementById('app').appendChild(createdom());

     

     

    createdom.js

     

    var message=require('./../data/index.json');
    module.exports = function() {
        var greet=document.createElement('div');
        greet.innerHTML="<p>"+message.name+"</p>"+"<p>"+message.content+"</p>"+"<p>"+message.start+"</p>";
        return greet;
    };
    


     

     

     

     

     

    3.命令操作

    在webstorm的Terminal窗口执行如下命令:

     

    a.生成依赖文件package.json(默认会在根目录下生成)

    npm install -g cnpm --registry=https://registry.npm.taobao.org

    cnpm    init

     

    b.依次安装相关依赖(安装后项目根目录下会出现node_modules文件夹,下面包含下载的依赖)

     

    1. cnpm intsall webpack -g
    2. cnpm install --save webpack                        //webpack打包工具
    3. cnpm install --save css-loader                       //css加载
    4. cnpm install --save style-loader                    //style加载
    5. cnpm install --save json-loader                    //json加载
    6. cnpm install --save webpack-dev-server      //本地服务
    7. cnpm install --save react react-dom             //react相关内容 
    8. cnpm install --save-dev babel-core babel-loader babel-plugin-import babel-preset-2015 babel-preset-react   //babel编译相关依赖

    4.配置webpack.config.js文件

    在项目根路径下创建webpack.config.js文件,文件内容为:

     

    var webpack = require('webpack');
    module.exports = {
        //2、进出口文件配置
        entry:__dirname+'/jsproject/entry.js',//指定的入口文件,“__dirname”是node.js中的一个全局变量,它指向当前执行脚本所在的目录
        output: {//输出
            path: __dirname+'/index',//输出路径
            filename: 'bundle.js'//输出文件名
        },
        module: {//在配置文件里添加加载器说明,指明每种文件需要什么加载器处理
            loaders: [
                {//json加载器
                    test: /\.json$/,
                    loader: "json-loader"//注意-loader不能省略,网上说能省略,经测试编译会报错
                },
                {//5、编译es6配置
                    test:/\.js$/,
                    exclude:/node_modules/,
                    loader:'babel-loader',//在webpack的module部分的loaders里进行配置即可
                    query:{
                        presets:['es2015','react']
                    }
                },
                {//3、CSS-loader
                    test:/\.css$/,
                    loader:'style-loader!css-loader'//添加对样式表的处理
                }
    
            ]
        },
        //4、服务器依赖包配置
        devServer: {//注意:网上很多都有colors属性,但是实际上的webpack2.x已经不支持该属性了
            contentBase: "./index",//本地服务器所加载的页面所在的目录
            historyApiFallback: true,//不跳转
            inline: true//实时刷新
            //hot:true,//不要书写该属性,否则浏览器无法自动更新
            //publicPath:"/asses/",//设置该属性后,webpack-dev-server会相对于该路径
        },
        plugins:[]//插件
    }


    此时的文件目录为:

     

     

    5.启动服务

    在Terminal中输入:

    webpack

    执行完成后,输入:

    webpack-dev-server

     

    然后在浏览器中输入:http://localhost:8080/

    此时可以看到效果了,而且更新代码。浏览器也会实时刷新。

     

    展开全文
  • webpack4搭建react项目实现前端模块化

    千次阅读 2018-04-28 09:40:45
    webpack4搭建react项目实现前端模块化 首先,你得把node.js,npm装好,然后新建一个文件夹app 1cmd到这个文件夹下输入指令 npm init -y 这时,app 下会生成一个 package.json 文件 2项目中安装 webpack ...
  • 1.安装依赖webpack项目依赖npm和nodejsbrew install npm npm install node检查版本npm -v ...局部安装:当前项目中安装,比如桌面有个webpack文件夹#打开终端--切换到当前项目文件夹 cd desktop/webpack #初始化,产生p
  • 我这边用的最新版的react脚手架,webpack版本已经升级了,去年12之前的它使用的webpack版本还是3.5的版本,如今的脚手架中config文件夹中的配置文件也少了,先上个模板, 实际开发中,难免要暴露webpack配置文件,...
  • webpack4搭建页面脚手架(一)

    千次阅读 2018-06-22 17:08:42
    开始的开始步入前端已经一年了,真心的体会到前端世界变化莫测,从jquery到vue,也算经历了一场大前端的变革。而在这几年,webapck的呼声越来越高。远超gulp,grunt等打包工具。平时使用vue-cli时用得biu顺,等到...
  • webpack超详细配置, 使用教程(图文)

    万次阅读 多人点赞 2018-12-24 11:33:54
    博主在这里就不详细介绍webpack来源以及作用了, 本篇博文面向新手主要说明如何配置webpack, 以及webpack的使用方法, 直到创建出一个合理的属于自己webpack项目.流程webpack安装 Step 1: 首先安装Node.js, 可以去Node...
  • webpack入门实践再加上核心概念讲解

    万次阅读 多人点赞 2020-08-04 16:37:31
    要先理解四个核心概念: 入口(entry) 输出(output) loader 插件(plugins)
  • webpack中文文档:==传送门== webpack英文文档:==传送门==   1、什么是webpackwebpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展...
  • Webpack安装教程

    千次阅读 2018-08-13 16:43:30
    本章为大家分享webpack4.0后的安装教程,自己刚接触时,网上大部分都是以前的安装教程,在过程真遇到些坑,为了大家不必浪费更的时间,这里将为大家详细介绍 webpack是什么,它是一个根据模块依赖关系进行静态...
  • 一文教你自学Webpack文档不再求人

    万次阅读 多人点赞 2020-08-07 17:14:32
    首先申明,本篇文章对于高手来说,毫无意义。对于新手来说,省学费了。
  • webpack-dev-server使用方法

    千次阅读 2019-08-09 09:03:44
    webpack-dev-server使用方法 首先来回顾以下webpack的内容 首先,我们来看看基本的webpack.config.js的写法 const path=require('path') ... //在配置文件中需要手动指定入口和出口 entry:path.join(...
  • webpack-merge合并webpack配置文件

    千次阅读 2020-02-19 10:04:57
    npm install webpack-merge -D 1、webpack.config.base.js开发环境和生产环境的共同配置 let path = require('path'); let HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } ...
  • webpack4升级指南以及从webpack3.x迁移

    万次阅读 2018-03-06 15:07:08
    几天前webpack发布了新版本v4.0.0,其中做了很改动,包括0配置以及移除了CommonsChunkPlugin等。由此而来的还有之前webpack3.x的项目如何迁移到新的webpack版本,本文就一个新的vue-cli创建的基于webpack的项目...
  • webpack的安装和基本使用

    万次阅读 2018-08-23 22:05:12
    webpack概念 中文文档官网: https://www.webpackjs.com/ 网页中常用的静态资源: JS(.js .jsx .coffee .ts(TypeScript中间语言,不能自浏览器中运行,需要编译器进行编译为js语言))  CSS(.css .less .sass -&...
  • 这两周一直想写webpack的知识点,却发现webpack其实要说的很具体内容挺的。而且稀土掘金上一搜webpack有好多人都有去写webpack的知识点,所以本文中不再去重复别人的东西了,就简单记录一下我对webpack的理解。并...
  • 为了避免项目代码都打包在一个文件下面,我采用入口多出口打包的方式,以src/pages文件夹为目录,然后在pages下分别创建每个功能的文件夹进行代码开发。这样打包之后就会分别打到每个文件夹下。效果如图: ...
  • vue-loader

    万次阅读 2017-02-04 15:49:46
    先来了解一下模块的概念,比如在nodeJS中,有require和exports关键字。...现在流行的是webpack,因为它不光你能加载js文件,还可以是css文件或图片等资源。 webpack,我们可以认为也是更加高级的模块假期,围绕
1 2 3 4 5 ... 20
收藏数 2,835
精华内容 1,134
关键字:

webpack 多出口文件 文件夹