webpack2教程--1webpack的安装和webpack.config.js介绍

最新推荐文章于 2019-09-18 16:32:00 发布

「已注销」

最新推荐文章于 2019-09-18 16:32:00 发布

阅读量308

点赞数

分类专栏： node webpack 文章标签： webpack2

本文链接：https://blog.csdn.net/qq_40899714/article/details/87016279

版权

本文是webpack2的基础教程，介绍了从安装到配置的全过程，包括处理HTML、CSS、JS、图片和字体，以及代理设置、多文件打包、CSS预处理器和模块热重载。此外，还讲解了如何解决跨域问题、提取公共库以及针对开发和生产环境的不同配置。

摘要由CSDN通过智能技术生成

之前都是gulp之类的，现在都什么时代了！是时候学习webpack，现在都webpack4.x了，没办法，我这种弱鸡就只能webpack2开始。
webpack官网文件

前提

安装node，安装成功，npm -vcmd命令来检查是否安装成功。
安装webpack,npm install webpack@x.x.x局部安装，全局安装使用npm install webpack@x.x.x -g,如果忘记版本号，npm view webpack versions --json查看所有版本号。
下载淘宝镜像源，国内npm下载很慢，而且有些包下下来会有问题，比如node-sass。所以需要切换为淘宝镜像源，npm install -g cnpm --registry=https://registry.npm.taobao.org
cls清空命令提示符窗口内容

webpack（我的系统是win10）

处理html

在根目录下生成package.json文件： npm init -y
安装webapck到开发模式：cnpm install webpack --save-dev
创建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")
    }
}

创建src目录，并在src目录下创建index.html，index.js文件并随便输入一点东西

window.onload = function(){
   
alert(1)
}

执行 webpack 命令，可以发现webpack帮我们在dist下生成了一个main.js文件,打开main.js并拖到最下面你会发现index.js的内容就在里面。
打包完之后，我们在dist生成了js文件，但是我们的index.html在src下面，你可以手动的复制src下的html文件到dist目录下，并且将打包后的js文件引入。不过像我们这么懒的人，还是希望webpack能够帮我们在dist下也生成index.html，要是能自动引入打包后的js文件，那就再好不过了。这时候，是时候来一发插件了。
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目录，再重新打包，这样就可以放心的睡觉，不用担心门没关了。
11. 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:[  
    <

最低0.47元/天解锁文章

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
webpack2教程--1webpack的安装和webpack.config.js介绍

之前都是gulp之类的，现在都什么时代了！是时候学习webpack，现在都webpack4.x了，没办法，我这种弱鸡就只能webpack2开始。webpack官网文件前提安装node，安装成功，npm -vcmd命令来检查是否安装成功。安装webpack,npm install webpack@x.x.x局部安装，全局安装使用npm install webpack@x.x.x -g,如果...
复制链接

扫一扫

专栏目录