精华内容
参与话题
问答
  • webpack超详细配置, 使用教程(图文)

    万次阅读 多人点赞 2017-05-06 19:22:14
    博主在这里就不详细介绍webpack来源以及作用了, 本篇博文面向新手主要说明如何配置webpack, 以及webpack使用方法, 直到创建出一个合理的属于自己webpack项目.流程webpack安装 Step 1: 首先安装Node.js, 可以去Node...

    博主在这里就不详细介绍webpack来源以及作用了, 本篇博文面向新手主要说明如何配置webpack, 以及webpack的使用方法, 直到创建出一个合理的属于自己webpack项目;

    注: 此篇博客适用于webpack2.x, 对于4.x版本变化还挺大的, 过一阵子会再写一篇, 点关注不走丢哦

    流程

    webpack安装

    • Step 1: 首先安装Node.js, 可以去Node.js官网下载.

    • Step 2: 在Git或者cmd中输入下面这段代码, 通过全局先将webpack指令安装进电脑中

    npm install webpack -g
    
    • Step 3: 使用Git Bash here 或者 cmd cd命令使当前目录转到当前项目的目录下, 然后输入下面这段命令
      npm init
      这里写图片描述
      接下来会弹出一些信息, 就是一些项目名和一些参数的描述, 可以全部按回车使用默认信息, 完成之后项目文件夹下会生成一个package.json的文件
      这里写图片描述
      这样webpack就安装完成了.




    webpack配置

    • Step1: 创建项目文件夹, 名字自起, 但路径名不要包含中文, 以及项目名也不要叫"webpack", 并且不要包含大写字母.
      例:这里写图片描述

    • Step2: 接下来创建并编写配置文件. 首先我们先介绍几个配置文件的参数.

      • entry: 是 页面入口文件配置 (html文件引入唯一的js 文件)
      • output:对应输出项配置
        • path :入口文件最终要输出到哪里,
        • filename:输出文件的名称
        • publicPath:公共资源路径
    • Step3: 在你的项目目录下创建webpack.config.js配置文件, 通过这个文件进行webpack的配置, 并且还要创建一些路径保存基本文件. 例如:
      这里写图片描述
      src文件夹
      这里写图片描述

    • Step4: 在src的js下创建一个入口文件, 我创建的叫做entry.js, 在项目目录再创建一个index.html用来调试使用. 编写webpack.config.js文件,

      //webpack.config.js
      module.exports = {
          entry : './src/js/entry.js',//入口文件
          output : {//输出文件
              filename : 'index.js',//输出文件名
              path : __dirname + '/out'//输出文件路径
          },
      

    }
    ```
    我们随便在index.html和入口文件entry.js写点什么看看是否成功配置,

    ```
    //index.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>ss</title>
    </head>
    <body>
    111
        <script src="./out/index.js"></script>//注意在这里引入的是打包完成的js文件
    </body>
    </html>
    ```
    
    
    ```javascript
    //entry.js
    console.log('1234');
    ```
    之后使用Git Bash here 或者 cmd cd命令使目录为当前项目目录, 输入**webpack**或者**webpack -w**命令, 查看index.html是否成功console出1234;
    

    webpack 和 webpack -w 区别
    webpack -w可以对项目打包并且实时监控, 当前配置文件下的文件如果发生更改时重新打包, 但如果webpack的配置文件即webpack.config.js更改时还是要通过webpack进行打包.(退出webpack -w 操作 ctrl+c)


    ### webpack loader加载器

    接下来我们继续配置loader, 通过加载器处理文件:比如 sass less 等, 告知 webpack 每一种文件都需要使用什么加载器来处理。

    • **Step1: **为了方便我们先统一把所有的包都先下载下来, 下面再慢慢解释.

      npm install babel-loader babel babel-core css-loader style-loader  url-loader file-loader less-loader less  --save-dev 
      
      

    - **Step2: **下载完成后, 我们修改webpack.config.js文件, 将加载器引入.
    ```
    module.exports = {
        entry :  './src/js/entry.js',
        output : {
            filename : 'index.js',
            path : __dirname + '/out'
        },
        module : {
            rules: [
                {test: /.js$/, use: ['babel-loader']},
                {test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style标签里*/
                //{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css变成文件通过link标签引入*/
                {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析图片*/
                {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成浏览器可以识别的css语言*/
            ]
        },
        }
    ```
    <br>
    
    • **Step3: **接下来我们先测试css, 我们在项目文件夹下的src文件夹下创建index.css. 随便写一点属性.

      //index.css
      .demo1 {
          width: 100px;
          height: 100px;
          background: red;
      }
      .demo2 {
          width: 200px;
          height: 200px;
          background: orange;
      }
      
      //index.html
      <!DOCTYPE html>
      
    text
    ``` 因为在webpack中所有文件都是模块, 所以必须要将css引入. 在刚刚的entry.js中添加如下代码.
    ```javascript
    //entry.js
    require('../css/index.css');//引入css文件
    console.log("1234");
    ```
    
    打包webpack一下看看效果
    ![这里写图片描述](https://img-blog.csdn.net/20170506175719289?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY19raXRl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)<br>
    
    • **Step4: **当有多个js文件时, 如何进行引入呢? 接下来我们做一个简单小功能来说明这个问题, 让我们点击方块的时候, 方块变大.

      接下来在src的js文件夹下创建一个基本的工具tool.js (很多小的问题都被我扩大化了, 只是为了说明问题不一定适用)

      //tool.js
      var tool = {//获取DOM元素
          getDom: function(className) {
              return document.getElementsByClassName(className)[0];
          }
      }
      
      module.exports = tool;//模块出口
      

      src的js下创建一个demo1.js文件, demo2.js同理

      var obj = require('./tool.js');
          var demo1 = {
          init: function() {
              this.bindEvent();
          },
          bindEvent: function() {
              //var demo1 = document.getElementsByClassName('demo1')[0];
              var demo1 = obj.getDom('demo1');
              demo1.onclick = this.changeStyle;
          },
          changeStyle: function() {
              this.style.width = '200px';
              this.style.height = '200px';
              this.style.background = 'green';
              console.log('1');
          }
      }
      
      module.exports = demo1;
      

      修改入口文件entry.js

      require('../css/index.css');
      
      var demo1 = require('../js/demo1.js');
      var demo2 = require('../js/demo2.js');
      
          demo1.init();
          demo2.init();
      

      webpack一下, 看看效果
      这里写图片描述



    关于图片的打包

    • **Step1: **在img文件夹下随便找一个小一点的图片放进去.

    • **Step2: **修改entry.js

      require('../css/index.css');
      
      var demo1 = require('../js/demo1.js');
      var demo2 = require('../js/demo2.js');
      
          demo1.init();
          demo2.init();
      
      var oImg = new Image();
      oImg.src = require('../img/1.gif');//当成模块引入图片
      document.body.appendChild(oImg);
      

      由于我们引入的是静态资源, 在webpack.config.js中修改一下

      module.exports = {
      	    entry :  './src/js/entry.js',
      	    output : {
      	        filename : 'index.js',
      	        publicPath: __dirname + '/out',//添加静态资源, 否则会出现路径错误
      	        path : __dirname + '/out'
      	    },
      	    module : {
      	        rules: [
      	            {test: /.js$/, use: ['babel-loader']},
      	            {test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style标签里*/
      	            //{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css变成文件通过link标签引入*/
      	            {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析图片*/
      	            {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成浏览器可以识别的css语言*/
      	        ]
      	    },
      }
      

      大家自己webpack看看效果



    webpack进阶设定

    我们在项目中有多个html文件时怎么处理呢?, 接下来我们重新设定配置文件, webpack.config.js

    	module.exports = {
    		    entry : {index1: './src/js/entry.js', index2: './src/js/entry2.js'},
    	    output : {
    		        filename : '[name].js',//这样就可以生成两个js文件, 名字分别为index1.js, 和index2.js
    		        publicPath: __dirname + '/out',//添加静态资源, 否则会出现路径错误
    		        path : __dirname + '/out'
    		    },
    		    module : {
    		        rules: [
    		            {test: /.js$/, use: ['babel-loader']},
    		            {test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style标签里*/
    		            //{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css变成文件通过link标签引入*/
    		            {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析图片*/
    		            {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成浏览器可以识别的css语言*/
    		        ]
    		    },
    	}
    


    webpack插件使用

    首先我们由于要使用webpack插件, 因此我们要重新下载一下webpack包, 将目录定位到当前项目目录, 输入npm install webpack
    之后我们修改webpack.config.js, 将下面代码放到配置文件开头. 这样就可以使用插件了

    var webpack = require('webpack');
    

    将插件信息写到配置文件里

    var webpack = require('webpack');
    var uglifyPlugin = new webpack.optimize.UglifyJsPlugin({minimize: true});//代码压缩
    
    var CommonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin('common');//把公共模块提取出来, 并取名为'common'(名字自起), webpack之后再out文件夹下生成common.js, 测试时记得引入提取出来的公共模块js文件
    
    var ExtractTextPlugin = require("extract-text-webpack-plugin");//将css独立引入变成link标签形式, 使用该插件需要独立下载'npm install extract-text-webpack-plugin --save-dev', 同时下面的rules也必须更改
    
    var providePlugin = new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery'});//引入jquery
    
    
    
    module.exports = {
        entry : {index: './src/js/entry.js', index2: './src/js/entry2.js'},
        output : {
            filename : '[name].js',
            publicPath: __dirname + '/out',
            path : __dirname + '/out'
        },
        module : {
            rules: [
                {test: /.js$/, use: ['babel-loader']},
                //{test: /.css$/, use: ['style-loader', 'css-loader']},
                {test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},
                {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},
                {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}
            ]
        },
        plugins: [uglifyPlugin, CommonsChunkPlugin, new ExtractTextPlugin('[name].css'),providePlugin]//插件集合
    }
    


    webpack服务器

    首先先定位目录输入命令 npm install webpack-dev-server -g, 修改webpack.config.js文件

    publicPath: 'http://localhost:8080/out',
    

    html文件所引用的目录也要更改:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>text</title>
         <link rel="stylesheet" href="http://localhost:8080/out/index.css">
    </head>
    <body>
        <a href="http://localhost:8080/index2.html">11</a>
        <div class="demo1"></div>
        <div class="demo2"></div>
        <script src="http://localhost:8080/out/common.js"></script>
        <script src="http://localhost:8080/out/index.js"></script>
    </body>
    </html>
    

    webpack-dev-server一下看看效果

    小工具: webpace-dev-server --devtool eval-source-map --progess --colors打包时输入这一行可以直接找到文件如果出错时的位置

    小知识点: 上面这一句话如果觉得太长可以将

    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "xuan": "webpack-dev-server --devtool eval-source-map --progress --colors"
      },
    

    这一段代码放到项目目录下的package.json里, 这样调试时如果输入npm run xuan就等于输入那一长串代码

    展开全文
  • webpack使用

    2020-11-17 17:08:11
    webpack是什么 静态资源打包工具(简称打包工具) ------------------------前端必备 webpack核心 1.入口文件(entry): 好比main.js 2.出口文件(output):好比dist 打包之后的文件夹 3.插件(plugins):自动...

    webpack是什么

    静态资源打包工具(简称打包工具) ------------------------前端必备

    webpack核心

    1.入口文件(entry): 好比main.js
    2.出口文件(output):好比dist 打包之后的文件夹
    3.插件(plugins):自动生成html文件等插件
    4.转换器(loader):sass less 转换成我们想要的文件类型
    5.服务器(dev-serve):使我们webpack在本地运行 服务
    6.模式(mode):可以切换开发环境 和 生成环境

    webpack特点

    1.js依赖进行整合处理 (打包整合)
    2.一些预处理的sass,less可以在环境中进行编译 (转换)
    3.可以对js、html、图片等进行压缩 (优化)

    webpack搭建步骤

    全局安装webpack

    npm install webpack webpack-cli –g

    如果因为版本过高,无法执行相关指令,请安装其他版本

    直接重新安装就行,使用 npm i webpack@4.35.3 -g

    创建本地项目:

    首先使用 npm init -y 命令,初始化一个package.json
    在这里插入图片描述

    创建一个src文件夹,src中创建一个index.html,src 中创建一个 main.js 作为主要开发文件,
    在这里插入图片描述
    index.html里面加一个div,div随便起一个 id,将其引入bundle.js
    在这里插入图片描述
    在main.js进行dom操作,操作html中的root div,
    在这里插入图片描述
    在这里插入图片描述
    打包命令

    webpack src/main.js --output src/bundle.js

    如果不想每次修改都需要打包一次,可以一直执行,就操作下面的内容

    创建一个webpack.config.js文件 (和src同级目录下)
    里面引入:

    const path = require(“path”)
    module.exports = {
    entry:"./src/main.js",
    output:{
    filename:“bundle.js”,
    path:path.resolve(__dirname,“dist”)
    }
    }

    建立本地服务器

    cnpm i webpack-dev-server -D

    将其引入到package.json中

    “dev”: “webpack-dev-server --open --port 8888 --contentBase src --hot”
    在这里插入图片描述
    完成运行

    命令npm run dev

    如果报错,解决报错 cnpm i webpack@4.35.3 webpack-cli@3.3.5 -S
    再次执行完成运行命令

    npm run dev

    以上内容就是webpack基本操作过程

    如果需要用到sass,首先需要安装

    下载依赖 cnpm i node-sass sass-loader style-loader css-loader -D

    在webpack.config.js 配置 规则

    module: {
    rules: [
    //解析.scss文件,对于用 import 或 require 引入的sass文件进行加载,以及…声明的内部样式进行加载
    {
    test: /.scss$/,
    use:[‘style-loader’, ‘css-loader’, ‘sass-loader’]
    }
    ]
    }

    下载依赖 cnpm i html-webpack-plugin -D

    在webpack.config.js 配置 插件

    //引入
    var HtmlWebpackPlugin = require(‘html-webpack-plugin’);
    // 插件
    plugins:[
    new htmlWebpackPlugin({
    filename:“index.html”,
    template:path.join(__dirname,‘index.html’)
    })
    ],

    项目文件夹中创建css文件夹,在css文件中创建scss
    在这里插入图片描述
    index.html 模板拿到和src同级

    配置完之后 运行即可,

    展开全文
  • webpack安装及使用

    2020-11-17 19:17:08
    webpack安装及使用 文章目录webpack安装及使用二、webpack的特点。三、webpack的核心?四、webpack搭建步骤。 # 一、webpack是什么? webpack就是一种打包工具(静态资源打包工具) 二、webpack的特点。 js依赖...

    webpack安装及使用


    # 一、webpack是什么?

    webpack就是一种打包工具(静态资源打包工具)

    二、webpack的特点。

    1. js依赖进行整合处理 (打包整合)
    2. 一些预处理的sass,less可以在环境中进行编译 (转换)
    3. 可以对js、html、图片等进行压缩 (优化)

    三、webpack的核心?

    • entry 入口文件 // 文件的核心js文件
    • output 出口文件 // 打包后的dist文件
    • plugin 插件 // 各类插件
    • loader 转换器 // 将文件转化为我们想要的文件类型
    • dev-serve 服务器 // 使我们webpack在本地运行 服务
    • mode 模式 // 可以切换开发环境 和 生成环境

    四、webpack搭建步骤。

    1.使用 webpack -v 确认当前环境有没有安装webpack,如果没有先安装webpack

    npm i webpack -g
    

    2.在想要成为 打包文件的文件夹中,使用 npm init -y 初始化一个package.json

    3.创建一个src,src下面创建一个index.html ,里面加一个div div随便起一个 id root名字,让引入bundle.js

    4.src 中创建一个 main.js 作为主要开发文件,在里面进行dom操作,操作html中的root div

    5.打包
    第一种方法:

    //在命令行执行
    webpack src/main.js --output src/bundle.js
    

    第二种方法:
    创建一个webpack.config.js

    const path = require("path")
    module.exports = {
        entry:"./src/main.js",
        output:{
            filename:"bundle.js",
            path:path.resolve(__dirname,"dist")
        }
    }
    

    运行webpack命令就可以进行打包

    6.打包可以使用热启动这样就不必每次修改完就需要打包了
    建立本地服务器: cnpm i webpack-dev-server -D
    下载依赖:cnpm i node-sass sass-loader style-loader css-loader -D
    在package.json中配置命令

    "dev": "webpack-dev-server --open --port 8888 --contentBase src --hot"
    

    7.解析 scss 文件
    在webpack.config.js中配置:

    module: {
            rules: [
                //解析.scss文件,对于用 import 或 require 引入的sass文件进行加载,以及...声明的内部样式进行加载            
                {
                    test: /\.scss$/,
                    use: ['style-loader', 'css-loader', 'sass-loader']
                }
            ]
        },
    

    8.引入jquery
    下载 npm i jquery --save

    import $ from 'jquery'
     $("#root").css({color:"red"})
    

    9.自动生成html页面
    下载依赖 cnpm i html-webpack-plugin -D
    在webpack.config.js 配置

    // 插件
    plugins:[
        new htmlWebpackPlugin({
            filename:"index.html",
            template:path.join(__dirname,'index.html')
        })
    ],
    

    将index.html 模板拿到和src同级
    配置完之后 再次打包运行即可

    展开全文
  • webpack使用

    千次阅读 2018-03-11 23:07:11
    其中浏览器不认识require关键字,webpack main.js build.js[运行时使用]webpack是一个资源的打包工具可以将 .js, .css , image等静态资源当做一个模块来进行打包,那么每一种模块都是有一个对应的 loader来实现, ...

    其中浏览器不认识require关键字,webpack main.js build.js[运行时使用]

    webpack是一个资源的打包工具可以将 .js, .css , image等静态资源当做一个模块来进行打包,那么每一种模块都是有一个对应的 loader来实现, webpack是基于nodejs运行的,所以在安装webpack之前必须先安装nodejs环境,

    开发代码【src】和打包后生成的代码【dist】

    • webpack常用指令

     
          webpack 入口文件.js 输出文件.js
          webpack         // 最基本的启动webpack的方法,默认查找名称为 webpack.config.js文件
          webpack --config webpack.config.js    // 指定配置文件    
          
          webpack -p      // 对打包后的文件进行压缩
          webpack -d      // 提供source map,方便调式代码
    • webpack.config.js【在src中】配置文件的作用

        如果只在cmd命令面板中输入 webpack指令,后面不跟任何参数的话,则默认查找的是 webpack.config.js文件,在这个文件中可以配置入口文件,输出文件以及相关loader和插件等,以增强webpack的功能
    • 【其中webpack1.4.0要求输出的路径为绝对路径,方法为:path:_dirname(所在文件夹的绝对路径)+'/dist'】
    • 一个常用webpack1.0版本的webpack.config.js文件结构:

     
    // 导入html-webpack-plugin 包,用来根据模板自动生成index.html
    var htmlwp = require('html-webpack-plugin');
    module.exports={    
        entry:'./src/main.js', // 1.0 定义打包的入口文件路径
        output:{
            path:'./dist',   //打包以后的文件存放目录
            filename:'build.js'  // 打包以后生成的文件名称
        },
        module:{
            loaders:[
                {
                    // 将当前项目中所有的.js文件都要进行es6转es5操作,node_moudels除外
                    test:/\.js$/,   //表示当前要打包的文件的后缀正则表达式
                    // loader:'babel-loader?presets[]=es2015', //如果写到这里,将来在打包.vue文件的时候会报错,表示先利用css-loader解析.css文件,再调用style-loader打包
                    loader:'babel-loader',
                    exclude:/node_modules/  //node_modules中的所有.js文件不去转换,提高打包性能
                }           
            ]
        },
        babel:{
             presets: ['es2015'],  //表示es6转es5
             plugins: ['transform-runtime']  //这句代码就是为了解决打包.vue文件不报错
        },
        plugins:[
            new htmlwp({
              title: '首页',  //生成的页面标题
              filename: 'index.html', //webpack-dev-server在内存中生成的文件名称,自动将build注入到这个页面底部,才能实现自动刷新功能
              template: 'index1.html' //根据index1.html这个模板来生成(这个文件请你自己生成)
            })
        ]
    }
        

    4.0.2 webpack中loader介绍

    • loader介绍

        webpack本身不支持css,less,sass,js,image等相关资源的打包工作的,它仅仅提供了一个基础的框架,在这个框架上借助于相关的loader才可以实现css,less,sass,js,image等相关资源的打包工作
    

    4.0.3 webpack相关配置

       在使用loader之前需要在当前项目目录下打开cmd命令面板,输入: npm init 初始化一个 package.json文件来存放相关的 loader包

    4.0.3.1 打包css资源演示

    【--save -dev 是为了将包的版本号和文件名保存到package.json】

    webpack中使用css-loader和style-loader这两个loader来处理css资源的打包工作,所以使用前必须在项目中先安装这两个包:
    npm i css-loader style-loader --save-dev
    • 在webpack.config.js中配置这两个loader


    • 在项目中建立一个site.css文件,并且在main.js中导入


    • 在cmd中执行webpack命令

    4.0.3.2 打包sass资源演示

    webpack中使用sass-loader,css-loader,style-loader来处理.scss文件的打包工作,而sass-loader需要依赖于node-sass所以使用前必须在项目中先安装这些包,
    并且node-sass的某些文件下载是需要去google上的,为了防止被墙而导致安装失败,所以建议使用cnpm来安装:
    cnpm install node-sass sass-loader css-loader style-loader --save-dev
    • 在webpack.config.js中配置这两个loader

    • 在项目中建立一个site1.scss文件,并且在main.js中导入

    • 在cmd中执行webpack命令

      在项目根目录下打开cmd命令面板,输入:webpack  回车即可打包完成
      此时检查build.js文件的内容,sass语法是变成了css语法表示打包成功

    4.0.3.3 打包less资源演示

    需要安装的node包有:
    	css-loader:  编译css
    	style-loader:编译css
    	less-loader: 编译less
    	less:  less-loader的依赖包
    	
        在项目根目录下打开cmd命令面板,输入:
        npm install less less-loader style-loader css-loader --save-dev 回车即可完成安装
    
    • 在webpack.config.js中配置这两个loader

    • 在项目中建立一个site1.scss文件,并且在main.js中导入

    • 在cmd中执行webpack命令

      在项目根目录下打开cmd命令面板,输入:webpack  回车即可打包完成
      此时检查build.js文件的内容,less语法是变成了css语法表示打包成功

    4.0.3.4 打包url()请求的资源

    需要安装的node包有:
    	url-loader:打包通过url()方式的请求资源
    	file-loader: url-loader的依赖loader
    	
        在项目根目录下打开cmd命令面板,输入:
        npm install url-loader file-loader --save-dev 回车即可完成安装
    
    • 在webpack.config.js中配置这两个loader


    • 在site.css文件导入一个图片


    • 在cmd中执行webpack命令

      在项目根目录下打开cmd命令面板,输入:webpack  回车即可打包完成
      检查是否成功分两种情况:
      1、如果打包的图片大小大于配置文件中 url-loader?limit= 中的limit值的话,则会在目录下看到一张单独的一个图片
      2、如果打包的图片大小小于等于配置文件中 url-loader?limit= 中的limit值的话,则会将图片以base64格式存储在build.js中
       
      请按照上述两种情况去验证是否打包成功

    4.0.3.5 ECMAScript6语法转ECMAScript5语法

    需要安装的node包有:
    	babel-core
        babel-loader
        babel-preset-es2015
        babel-plugin-transform-runtime:这个包主要是在打包.vue组件页面中的es6语法需要
     
    	
        在项目根目录下打开cmd命令面板,输入:
        npm install babel-core babel-loader babel-preset-es2015 babel-plugin-transform-runtime  --save-dev 回车即可完成安装
    • 在webpack.config.js中配置这两个loader

    • 在main.js中使用es6语法导入site.css

        import '../statics/css/site.css'

    • 在cmd中执行webpack命令

      在项目根目录下打开cmd命令面板,输入:webpack  回车即可打包完成
      检查build.js文件中,如果出现了类似于 require('../statics/css/site.css'); 但是看不到import '../statics/css/site.css' 表示转换成功
    ,
    需要安装的node包有:
    	babel-core
        babel-loader
        babel-preset-es2015
        babel-plugin-transform-runtime:这个包主要是在打包.vue组件页面中的es6语法需要
     
    	
        在项目根目录下打开cmd命令面板,输入:
        npm install babel-core babel-loader babel-preset-es2015 babel-plugin-transform-runtime  --save-dev 回车即可完成安装
    
    
    • 在webpack.config.js中配置这两个loader

    • 在main.js中使用es6语法导入site.css

        import '../statics/css/site.css'
    
    
    • 在cmd中执行webpack命令

      在项目根目录下打开cmd命令面板,输入:webpack  回车即可打包完成
      检查build.js文件中,如果出现了类似于 require('../statics/css/site.css'); 但是看不到import '../statics/css/site.css' 表示转换成功
    
    

    4.0.2 webpack中loader介绍

    • loader介绍

        webpack本身不支持css,less,sass,js,image等相关资源的打包工作的,它仅仅提供了一个基础的框架,在这个框架上借助于相关的loader才可以实现css,less,sass,js,image等相关资源的打包工作
    
    
    

    4.0.3 webpack相关配置

       在使用loader之前需要在当前项目目录下打开cmd命令面板,输入: npm init 初始化一个 package.json文件来存放相关的 loader包
    
    

    4.0.3.1 打包css资源演示

    webpack中使用css-loader和style-loader这两个loader来处理css资源的打包工作,所以使用前必须在项目中先安装这两个包:
    npm i css-loader style-loader --save-dev
    
    
    • 在webpack.config.js中配置这两个loader

    • 在项目中建立一个site.css文件,并且在main.js中导入

    • 在cmd中执行webpack命令

    4.0.3.2 打包sass资源演示

    webpack中使用sass-loader,css-loader,style-loader来处理.scss文件的打包工作,而sass-loader需要依赖于node-sass所以使用前必须在项目中先安装这些包,
    并且node-sass的某些文件下载是需要去google上的,为了防止被墙而导致安装失败,所以建议使用cnpm来安装:
    cnpm install node-sass sass-loader css-loader style-loader --save-dev
    
    
    • 在webpack.config.js中配置这两个loader

    • 在项目中建立一个site1.scss文件,并且在main.js中导入

    • 在cmd中执行webpack命令

      在项目根目录下打开cmd命令面板,输入:webpack  回车即可打包完成
      此时检查build.js文件的内容,sass语法是变成了css语法表示打包成功
    
    

    4.0.3.3 打包less资源演示

    需要安装的node包有:
    	css-loader:  编译css
    	style-loader:编译css
    	less-loader: 编译less
    	less:  less-loader的依赖包
    	
        在项目根目录下打开cmd命令面板,输入:
        npm install less less-loader style-loader css-loader --save-dev 回车即可完成安装
    
    
    
    • 在webpack.config.js中配置这两个loader

    • 在项目中建立一个site1.scss文件,并且在main.js中导入

    • 在cmd中执行webpack命令

      在项目根目录下打开cmd命令面板,输入:webpack  回车即可打包完成
      此时检查build.js文件的内容,less语法是变成了css语法表示打包成功
    
    

    4.0.3.4 打包url()请求的资源

    需要安装的node包有:
    	url-loader:打包通过url()方式的请求资源
    	file-loader: url-loader的依赖loader
    	
        在项目根目录下打开cmd命令面板,输入:
        npm install url-loader file-loader --save-dev 回车即可完成安装
    
    
    
    • 在webpack.config.js中配置这两个loader

    • 在site.css文件导入一个图片

    • 在cmd中执行webpack命令

      在项目根目录下打开cmd命令面板,输入:webpack  回车即可打包完成
      检查是否成功分两种情况:
      1、如果打包的图片大小大于配置文件中 url-loader?limit= 中的limit值的话,则会在目录下看到一张单独的一个图片
      2、如果打包的图片大小小于等于配置文件中 url-loader?limit= 中的limit值的话,则会将图片以base64格式存储在build.js中
       
      请按照上述两种情况去验证是否打包成功
    
    

    利用webpack-dev-server实现热刷新配置

        我们在修改了代码以后需要不断的重新执行webpack命令重新打包然后回到浏览器刷新页面去查看,这种开发效率很低下,
        所以这里使用webpack-dev-server当代码更新的时候自动重新打包和刷新浏览器。
        
        需要安装的node包有:
        	webpack-dev-server : webpack开发服务器
            html-webpack-plugin :结合webpack在内存中自动生成index.html的入口文件
     
    	
        在项目根目录下打开cmd命令面板,输入:
        npm install webpack-dev-server html-webpack-plugin  --save-dev 回车即可完成安装
    • 在package.json文件中配置webpack-dev-server命令

        "scripts": {
            "dev":"webpack-dev-server --inline --hot --open --port 4009"
          }
          【【【【webpack run dev ]]]会自动的找到script然后执行Dev指令而且还会自动的向内存中【index1.HTML注入script、、、指向webpack。config。js中输的文件路径build。js】】】】
          
        参数说明:
        --inline :自动刷新
    	--hot :热加载
    	--port 指定监听端口为 5200
    	-- open : 自动在默认浏览器中打开
    	-- host: 可以指定服务器的ip,不指定默认为127.0.0.1(localhost)
    • 配置html-webpack-plugin组件

        webpack-dev-server要实现浏览器自动刷新,必须要利用html-webpack-plugin在内存中生成index.html页面才能实现
        html-webpack-plugin 配置步骤:
        1、在webpack.config.js中加入如下代码:
            // 导入html-webpack-plugin 包,获取到插件对象
            var htmlwp = require('html-webpack-plugin');
            
            plugins:[
            new htmlwp({
              title: '首页',  //生成的页面标题
              filename: 'index.html', //webpack-dev-server在内存中生成的文件名称,自动将build注入到这个页面底部,才能实现自动刷新功能
              template: 'index1.html' //根据index1.html这个模板来生成(这个文件请程序员自己生成)
            })
        ]
    • index1.html 模板页面代码

     
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
            <meta name="viewport"
                  content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
        </head>
        <body>
            <div id="app">
            </div>  
        </body>
        </html>
    • 运行

        在cmd中执行npm run dev 命令开启 webpack-dev-server服务器来运行vue项目
        这时候可以随便修改一个css样式,就会自动刷新看到效果    

    1.0.2 利用webpack解析和打包 .vue组件页面

        Vue项目中的每个页面其实都是一个.vue的文件,这种文件,Vue称之为组件页面,必须借助于 webpack的vue-loader才能使用
        所以必须安装相关包:
            vue-loader            : .vue文件编译loader
            vue-template-compiler : .vue模板编译,被vue-loader所依赖
            babel-plugin-transform-runtime : es6实时转换成es5语法
            
         1、在项目根目录下打开cmd命令面板,输入:
           npm install vue-loader vue-template-compiler babel-plugin-transform-runtime --save-dev 回车即可完成安装
           [[[[[[[保存在package.json中的devdependence里面在开发阶段使用,在运行阶段不适用]]]]]]]
           
         2、在webpack.config.js中添加如下配置(只能在webpack1.0中使用):
         babel:{
    		 presets: ['es2015'],  
    		 plugins: ['transform-runtime']  //这句代码就是为了解决打包.vue文件不报错
    	}
    	
         在webpack2.0中在webpack.config.js中添加 babel:{}是不认识的,要改成如下方式:
         在项目根目录下新建 .babelrc文件,内容填写如下:
         {
    		 presets: ['es2015'],  
    		 plugins: ['transform-runtime']  //这句代码就是为了解决打包.vue文件不报错
    	}
    	
    
        3、在webpack.config.js中的loaders中增加
                {
    				// 打包.vue文件
    				test:/\.vue$/,   //表示当前要打包的文件的后缀正则表达式
    				loader:'vue-loader' //
    			}
        

    展开全文
  • webpack基本用法

    千次阅读 2018-08-12 22:01:09
    网页中常见的静态资源: JS:.js .jsx .coffee .ts(TypeScript 类c#语言) CSS:.css .less .sass .scss Images:.jpg .jpeg .png .gif .bmp 字体文件(Fonts): .svg .ttf .eot .woff .woff2 ...
  • Webpack项目中引入Bootstrap4.x

    千次阅读 2019-08-09 19:00:41
    Bootstrap是一个简洁、直观、强悍的前端开发框架,在Web开发中使用频率很高,本文主要记录一下如何在 webpack项目中引入Bootstrap4.x。 由于Bootstrap在各个Vue组件中经常会被用到,为了避免在每一个组件中重复引入...
  • webpack引入jquery以及bootstrap方法

    万次阅读 2017-07-29 16:17:24
    安装jQuery npm install jquery --save-dev ...由于 Bootstrap 依赖于 jQuery,所以在代码中 import jQuery from ‘jquery’ 是不够的,这只是解决了自己代码对 jQuery 的依赖,在此处使用webpack...
  • webpack字体图标不显示 ...解决方案见我博文:webpack中引入bootstrap报错 原因二: npm i webpack 通过此命令默认安装的最新版webpack4版本的,4版本里没有font文件,所以需安装3版本 命令如下 npm i w...
  • Rails6将默认使用webpack代替asset: 本文讲述如何自己配置。 参考: https://getbootstrap.com/docs/4.1/getting-started/webpack/ https://github.com/rails/webpacker ...
  • vue+webpack+bootstrap使用

    千次阅读 2017-09-04 19:03:14
    亲测可用,引用自: https://www.ctolib.com/docs-webpack-vue-cli-c-104539.html
  • 有时候我们要引入bootstrap ui样式 并不引入 bootstrap.js文件 很多时候只是引入css文件 这个时候 就来简单说一下 1.在入口的文件引入bootstrap import "bootstrap" 如果上面这种方式引入的话 是会报错的错 它会...
  • WebPack引用Bootstrap 无法使用图标的结局方案 2019-01-12 10:18 by 张子浩, ... 阅读, ... 评论, 收藏, 编辑 npm i https://github.com/iconic/open-iconic.git -D 因为boostrap的css里删除了图标 分开了 ...
  • webpack打包bootstrap

    2016-12-01 09:30:47
    使用bootstrap-loader,官网上说得很明白,官网地址:https://github.com/shakacode/bootstrap-loader,搬到这里记录一下: [b]一、安装[/b] # 第1步安装bootstrap-loader npm install bootstrap-loader --...
  • webpack引入bootstrap4报错

    千次阅读 2018-08-12 00:42:07
    webpack在安装时若不指定版本,则默认指定安装最新版   bootstrap4,需要手动安装popper.js   npm install popper --save-dev   即可
  • vue项目webpack使用cdn

    2020-07-15 01:00:05
    1.在index.html中引入vue和vue-router <script src="https://cdn.bootcss.com/vue/2.6.8/vue.min.js"></script> <...</script>...2.在build文件夹中的webpack.base.conf.js添加 externals: .
  • 在开发中我们还需要一个本地文件的服务器,并且当我们保存代码的时候会自动进行打包,并且还支持 Source Map, 以方便代码调试等功能,因此我们现在需要使用到 DevServer了。 ...
  • webpack集成bootstrap进行多页面开发

    千次阅读 2017-05-16 16:49:52
    这篇文章已经过时了,有兴趣的可以看看github上示例工程,其基本思想还是一致的: ...最近以jquery、bootstrap为例,搞了个多页面,多入口开发结构,mark一下。   开发人员主要集中在以上三
  • express+webpack+bootstrap项目搭建从0做起

    千次阅读 2017-06-01 19:30:43
    本文依然为菜鸟初学者耐心整理前端项目搭建问题,如果遇到不严谨的地方还望提出,如果觉得对学习有帮助可以持续关注我的文章,作者会不定期推出各类带领初学者排坑的文章
  • Webpack 引入bootstrap

    2017-05-03 17:03:00
    如果可以使用webpack引入的bootstrap.css,就可以一个npm install完成项目的依赖,而不必手工的添加到html内。本来以为在入口文件内加一行就行: import 'bootstrap/dist/css/bootstrap.css' 复制代码...
  • webpack使用art-template

    2019-03-07 09:50:41
    下载 npm i art-template-loader art-template -d 配置 module.exports = { module: { rules: [ { test: /\.art$/, loader: 'art-template-loader' ...
  • 如何用webpack去加载bootstrap的css/scss 及JS呢,先准备一个bootstrap 模板b-index.html:<!DOCTYPE html> , initial-scal
  • 在HTML页面的JavaScript里使用commonJS规范,比如引入包的时候可以像写node.js代码那样require("包");
  • Webpack 使用

    千次阅读 2018-04-18 19:08:00
    简介 webpakc的定位实际上是打包器.而不是任务执行器. 当然也可以配合grunt进行使用....webpack也提供了便捷的打包流程...因此这里简单介绍一下webpack使用一些总结.更详细细致的内容可以到官网进行拓展. 安装 ...
  • webpack使用(4)之引入第三方JS库

    千次阅读 2018-09-09 19:41:00
    一、script引入第三方库lodash 不建议使用 &amp;lt;script src=&quot;https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt;
  • 解决webpack使用ip访问

    千次阅读 2019-06-12 08:22:19
    设置如下,既可以用ip又可以用localhost访问
  • vue-cli+webpack在生成的项目中使用bootstrap方法(一)中,是通过手动下载bootstrap库,然后手动添加到src/assets中,显然是过程太多。 当然是可以更省力些,可以通过npm安装bootstrap,然后用import直接导入...
  • npm i jquery bootstrap@3 -S webpack.config.js const webpack = require('webpack') module.export = { ... plugins: [ new webpack.ProvidePlugin({ jQuery: 'jquery', $: 'jquery' }) ] } mai.....
  • 解决方案:详见webpack resolve.module章节 ~默认查找node_modules中包
  • 如果可以使用webpack引入的bootstrap,就可以一个npm install完成项目的依赖,而不必手工的添加到html内。  首先咱们在前端刚兴起的时候,是在html页面通过<script src='./js/bootstrap.js'> <link href=...
  • webpack使用之自动刷新

    千次阅读 2015-11-10 09:42:43
    webpack-dev-server的自动刷新功能

空空如也

1 2 3 4 5 ... 20
收藏数 173,256
精华内容 69,302
关键字:

webpack使用