webpack2教程--从入门到放弃

时间  2019-11-09
标签 webpack2 webpack 教程 入门 放弃 繁體版
原文   原文链接

开车以前，先介绍一些npm的命令：

：D
进入D盘javascript

mkdir webappcss

建立webapp文件夹

cd webapphtml

进入webapp文件夹

mkdir webapp && cd webappvue

以上两步建立和进入文件夹能够合并为一步

npm init -yjava

快速生成package.json文件

npm install xxx --save-devnode

//安装模块并加入到开发依赖中，好比webpack

npm install xxx --savejquery

安装模块并加入到生产依赖中，好比Jquery

npm install xxx@2.3.0webpack

下载指定版本

npm view webpack versions --jsongit

若是忘记版本号，能够列出全部版本号

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

下载淘宝镜像源，国内npm下载很慢，并且有些包下下来貌似会有问题，好比node-sass。

下载以后就能够直接使用了，使用方式跟Npm同样，只不过是改为cnpm

cls

清空命令提示符窗口内容




webpack

1. html篇

介绍完npm基本的东西后，下面开始撸webpack

有关webpack的基本概念建议到官网查看，解释的更为清楚，下面只简单介绍。

1.  在根目录下生成package.json文件： npm init -y


2.  安装webapck cnpm install webpack --save-dev


3. 建立webpack.config.js文件： echo > webpack.config.js
var path=require("path");
module.exports={
   <!--  要打包的文件 -->
    entry:"./index.js",

    output:{
        <!-- 指定打包后的文件名字 -->
        filename:"bundle.js",
        <!-- 打包后的文件路径 -->
        path:path.resolve(__dirname,"dist")
    }
}
4.建立src目录，并在src目录下建立index.html, index.js文件并随便输一点东西
window.onload=function(){
         alert(1)
    }
5.执行 webpack 命令，能够发现webpack帮咱们在dist下生成了一个main.js文件,打开main.js并拖到最下面你会发现index.js的内容就在里面。

打包完以后，咱们在dist生成了js文件，可是咱们的index.html在src下面，你能够手动的复制src下的html文件到dist目录下，而且将打包后的js文件引入。不过像咱们这么懒的人，仍是但愿webpack可以帮咱们在dist下也生成index.html，要是能自动引入打包后的js文件，那就再好不过了。这时候，是时候来一发插件了。


6.cnpm install html-webpack-plugin --save-dev
修改webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require("path")
module.exports = {
    entry:"./index.js",
    output: {
        path: path.resolve(__dirname, 'dist'),
         filename:"bundle.js",
    },
    plugins: [new HtmlWebpackPlugin({
        title: "测试"       
    })]
};
从新执行命令 webpack ,你会发如今dist下多生成了一个index.html文件，打开发现还有一个script的标签引用着咱们打包后的文件，nice。

不过问题又来了，html文件很简陋，就是emmet帮咱们生成的Html5文件，你可能但愿还带有更多的 meta标签，像这样的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no, email=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
</head>
<body>
    <header></header>
    <nav></nav>
    <div id="app"></div>
    <footer></footer>
</body>
此时，你能够本身写一个模板，只须要告诉html-webpack-plugin插件文件的位置就能够了。
修改webpack.config.js
plugins: [
    new htmlWebpackPlugin({
        title:"首页",
        <!-- 指定模板位置 -->
        template:'./src/index.html',
        <!-- 指定打包后的文件名字 -->
        filename: 'index.html'
    })
]
对于多疑症的你，打包屡次后你可能会怀疑文件修改生效了没有，此时你能够安装clean-webpack-plugin插件，在每次打包时，先删除原来的dist目录，再从新打包，这样就能够放心的睡觉，不用担忧门没关了。
7.cnpm install clean-webpack-plugin --save-dev
plugins:[
    new htmlWebpackPlugin({
        title:"首页",
        template:'./src/index.html',
        filename: 'index.html'
    }),
    <!-- 每次打包前先删除dist目录 -->
    new CleanWebpackPlugin(['dist'])
]

css篇


以往咱们写css都是写好后手动经过link引入到html,使用webpack后，你将再也不须要手动作这些操做,只须要在js文件中引入，webpack就能帮你搞定，不过须要一些loader和plugin的支持。

cnpm install --save-dev css-loade style-loader

修改webpack.config.js
###为了处理css文件咱们须要多配置一个module参数,并使用css-loader来将css文件打包到成“字符串”到js文件中，并使用style-loader将打包后的字符串提取出来并append<style>标签到head下面 

var path=require("path");
var htmlWebpackPlugin=require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports={
  entry:{
    main:'./src/index.js'
  },
  output:{
    filename:"bundle.js",
    path:path.resolve(__dirname,'dist')
  },
  module:{
    rules:[   
        <!-- test检测到以xxx结尾的东西use对应的loader -->
        {
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]         
        }
    ]
  },
  plugins:[
    new htmlWebpackPlugin({
      title:"首页",
      template:'./src/index.html',
      filename:"index.html"
    }),
    new CleanWebpackPlugin(['dist'])    
  ]
}
哦，据说你想用sass 预处理 器,那么只须要在use里加多一个sass-loader,并安装依赖
cnpm install --save-dev sass-loader node-sass

rules:[  
    {
        test: /\.scss$/,
        use: [ 'style-loader', 'css-loader',"sass-loader" ]         
    }
]
什么，想要自动补全浏览器后缀autoprefixer？没问题
cnpm install --save-dev  postcss-loader

rules:[  
        {
            test: /\.s?css$/,
            use: [
                    {
                        loader: "style-loader"
                    }, 
                    {
                        loader: "css-loader"
                    }, 
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins:  [     
                                 require('autoprefixer')({
                                  browsers: ['last 10 versions']
                              })
                            ]
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]         
        }
    ]

这里须要注意，use里面的执行顺序是倒序的 ，,webpack会以倒叙的方式处理并将处理后的结果返回给上一个loader，最后经过style-loader将文件的内容append到head下面的style标签里。

教练，我还想要自动刷新

当你修改一点文件后，你须要重执行命令新编译文件，而后刷新页面。若是你使用过gulp的自动刷新好比live-reload，那你也必定但愿webpack也有一样的功能，webpack-dev-server知足你的需求而且可以给你更多。

安装webpack-dev-server到开发依赖  cnpm install --save-dev webpack-dev-server
<!-- 在package.json中加入： -->
"scripts": {
    "dev": "webpack-dev-server"
}
经过npm run dev便可执行建立一个服务器，打开localhsot:8080
此时再修改文件，你会发现页面自动刷新了而且修改生效了，不过你看不到从新编译后的文件在哪里，应为webpack-dev-server将文件编译到了内存中 ，比起从新生成文件效率会更高，固然只适用于开发阶段。
启动服务后，若是你 还想让他本身 打开Localhost，还想 使用模块热重载 ，能够加多一个配置
devServer:{
         open:true,  
         hot: true,// 告诉 dev-server咱们想用HMR模式                   
  }
开发的时候咱们并不在乎 style这种形式，可是咱们但愿在生产环境下 css能从js文件宏分离出来，咱们但愿能css能跟js并行加载，并且能够避免由于Js文件过大，加载慢而产生的flash of unstyle(无样式页面闪烁)。
使用“extract-text-webpack-plugin”插件来分离css代码。

修改webpack.config.js

cnpm install --save-dev  extract-text-webpack-plugin
var path=require("path");
var webpack=require('webpack');
var htmlWebpackPlugin=require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

var extractSass = new ExtractTextPlugin({
    filename: "[name].[contenthash].css",
    disable: process.env.NODE_ENV === "development"
});

//经过设置环境变量来告诉webpack咱们在development模式下不须要提取css到单独在文件，只有当不是development下（也便是production）才须要提取文件。

module.exports={
  entry:{
    main:'./src/index.js'
  },
  output:{
    filename:"bundle.js",
    path:path.resolve(__dirname,'dist')
  },
  devServer:{
         open:true,  
         hot: true, <!-- 告诉 dev-server咱们想用HMR模式 -->                
  },
  module:{
    rules:[
        {
        test: /\.s?css$/,
              use: extractSass.extract({

                  use: [
                  {
                      loader: "css-loader"
                  }, 
                  {
                    loader: 'postcss-loader',
                    options: {
                      plugins:  [     
                        require('autoprefixer')
                      ]
                    }
                  },
                  {
                      loader: "sass-loader"
                  }],
                  fallback: "style-loader"
              })
          }
    ]
  },
  plugins:[
    <!-- 使用此插件来支持热重载 -->
    new webpack.HotModuleReplacementPlugin(),

    new htmlWebpackPlugin({
      title:"首页",
      template:'./src/index.html',
      filename:"index.html"
    }),
    new CleanWebpackPlugin(['dist']),
    extractSass
  
  ]
}

修改package.json ,本人为window10系统

"scripts": {
    "dev": "set NODE_ENV=development&&webpack-dev-server",
    "build":"webpack -p"
}
分别执行npm run dev以及npm run build,你会发先npm run build时css文件被提取到一个单独的文件了。


js篇

--------------------------------好累啊下面直接上代码了

为了使用promise,async等es6,7语法，同时兼容低版本浏览器，你还须要将js转码为es5。

你须要安装如下依赖包
cnpm install --save-dev

    "babel-core": "^6.25.0",
    "babel-loader": "^7.0.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.5.2",

在module下增长：
{
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: ['env'],
            plugins: ['transform-runtime']
        }
    }
}

写一点async或者prmise代码，打包后发现promise变成了_promise2


代理



先后端分离开发时常常还会遇到跨域的问题，还能够利用devServer来进行代理

devServer:{
    open:true,  
    hot: true, 
    proxy: {
        '/api/': {
            target: 'http://baidu.com',
            secure: false,
            changeOrigin: true
        }
    }

$.ajax({
    url:'/api/',
    success:function(res){
        console.log(res)
    },
    error:function(res){
        console.log(res)
    }
})

图片，字体篇

{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    query: {
        limit: 8000,
        <!-- 小于8k的转化为Base64 -->
        name: '[name].[hash:7].[ext]'
    }
}, 

{
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    query: {
        limit: 8000,
         name: 'font/[name].[hash:7].[ext]'
    }
}
你可能想要把全部img或者font文件分别放到一个img或者font文件夹下，能够这么写:name: 'img/[name].[hash:7].[ext]'


若是你不想下载字体文件下来，可已上传到阿里字体库并使用阿里的在线字体图标，并复制本身的文件的在线地址。


在css里面像这么用：@import url("//at.alicdn.com/t/font_s0zqwb6by3lhm2t9.css");

打包多文件

var path=require("path");
var webpack=require('webpack');
var htmlWebpackPlugin=require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

var extractSass = new ExtractTextPlugin({
    filename: "[name].[contenthash].css",
    disable: process.env.NODE_ENV === "development"
});

module.exports={
  entry:{
    "main":'./src/js/index.js',
    "car":"./src/js/car.js",
    "goods":"./src/js/goods.js"
  }, 
 
  output:{
    filename:"[name].[hash].js",
    path:path.resolve(__dirname,'dist')
  },
 
  devServer:{
        open:true,  
        hot: true,
        proxy: {
            '/api/': {
                target: 'http://baidu.com',
                secure: false,
                changeOrigin: true
            }
        }
        
  },

  module:{
    rules:[
    
      {
        test: /\.s?css$/,
              use: extractSass.extract({
                  use: [
                  {
                      loader: "css-loader"
                  }, 
                  {
                    loader: 'postcss-loader',
                    options: {
                        plugins:  [     
                            require('autoprefixer')({
                              browsers: ['last 10 versions']
                          })
                        ]
                    }
                  },
                  {
                      loader: "sass-loader"
                  }],
                  fallback: "style-loader"
              })
          },
          {
              test: /\.js$/,
              exclude: /node_modules/,
              use: {
                loader: 'babel-loader',
                options: {
                  presets: ['env'],
                  plugins: ['transform-runtime']
                }
              }
        },
        {
　　　　　　test: /\.html$/,
　　　　　　use: ['html-withimg-loader']
　　　　},
        {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url-loader',
            query: {
                limit: 8000,
                name: 'img/[name].[hash:7].[ext]'
            }
        }, 
        {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'url-loader',
            query: {
                limit: 8000,
                 name: 'font/[name].[hash:7].[ext]'
            }
        }
    ]
  },
    plugins:[
        new webpack.HotModuleReplacementPlugin(),
        new htmlWebpackPlugin({
          title:"首页",
          template:'./src/index.html',
          filename:"index.html",
          chunks:["page/main/main"]
        }),
        new htmlWebpackPlugin({
          title:"购物车",
          template:'./src/index.html',
          filename:"car.html",
          chunks:["page/car/car"]
        }),
        new htmlWebpackPlugin({
          title:"商品",
          template:'./src/index.html',
          filename:"goods.html",
          chunks:["page/goods/goods"]
        }),

        new CleanWebpackPlugin(['dist']),
        extractSass,
        new webpack.ProvidePlugin({
             $:"jquery",
             jQuery:"jquery"
        }) 
        
    ]
}
上面这样写打包后文件都放在一个目录下，目录很乱，不方便管理，想让每一个页面的js，css文件放在对应目录下，能够按下面这么写
entry:{
    "page/main/main":'./src/js/index.js',
    "page/car/car":"./src/js/car.js",
    "page/goods/goods":"./src/js/goods.js"
  }
若是多个文件都引用了一些其余库，好比Jquery,vue,你可能想把全部的公共库提取出来，利用common-chunk插件能够解决。即便你作的是spa单页面应用，你也能够将公共库从js文件中提取出来，每次修改时只修改业务逻辑而不从新打包库，从而能够缓存库文件。
entry:{
        "main/main":'./src/js/index.js',
        "car/car":"./src/js/car.js",
        "goods/goods":"./src/js/goods.js"
        "vendor":["jquery","vue"]
  },

plugins:[     
        new htmlWebpackPlugin({
          ...同上
          chunks:["page/main/main","vendor","mainfest"]
        }),

        new htmlWebpackPlugin({
          ...
          chunks:["page/car/car","vendor","mainfest"]
        }),

        new htmlWebpackPlugin({
          ...
          chunks:["page/goods/goods","vendor","mainfest"]
        }),

         new webpack.optimize.CommonsChunkPlugin({
            name:["vendor","mainfest"]
        })
    ]
发现一个问题，在公司电脑dev-server-open自动打开的地址后面会带undefined，去掉undefined打开网址才正常

代码文件能够上github查看

https://github.com/linrunzheng/webpackGuide

经常使用的配置就这样了，其余配置能够去webpack官网看。若是以为本文对你有所帮助，麻烦点个start或者赞

webpack3都出了，你还不会2吗？

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程