王文健的博客笔记


请多指教

webpack 3.0+ (Ⅰ) 基础入门,练习模块打包基本配置

应用需求

对于前端构建的使用一直停留在框架之中的,最近写了一篇个人网站的首页放到线上,因为项目很小,想利用前端构建模块打包工具webpack对项目构建,做一些代码压缩合并es语法转换css语法兼容等一些提高项目兼容性与性能的事情,,为以之后慢慢尝试用模块化的方式写代码创造条件

webpack3.0+

  • 本来只是想稍微了解一下,写一些基本配置,对项目做一些基本的打包,学起来发现并没有想的那么简单,官方文档和npm上的loader介绍比较简洁,在我看来理解起来有点困难,而网上对于webpack的资料文章比较少而且很多都过时杂乱不堪,本来就想做一些基本的配置结果还花了一天多的时间,我把主要内容和代码记录下来供以后使用。

webpack.png

正文

什么是webpack

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Sass,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。在3.0出现后,Webpack还肩负起了优化项目的责任。

  • 打包:可以把多个Javascript文件打包成一个文件,减少服务器压力和下载带宽。
  • 转换:把拓展语言转换成为普通的JavaScript,让浏览器顺利运行。
  • 优化:前端变的越来越复杂后,性能也会遇到问题,而WebPack也开始肩负起了优化和提升性能的责任。

安装

针对过程细节不详细说明

使用前先创建个package.json文件,用作npm配置文件

npm init

把模块安装在开发环境下,除了全局安装最好把webpack在本地也安装下

npm install --save-dev webpack

在本地创建一个webpack.config.js配置文件,打包是webpack会根据配置文件进行打包

基础概念

webpack.config.js/配置文件

module.exports={
    entry:{}, //入口文件的配置项
    output:{}, //出口文件的配置项
    module:{}, //模块:例如解读CSS,图片如何转换,压缩
    plugins:[], //插件,用于生产模版和各项功能
}
  • entry 入口,打包文件的入口
  • output 出口,打包文件的出口
  • module 模块配置,设置loader,解析CSS和图片转换压缩等功能,loader使用前需npm安装
  • plugins 配置插件,webpack自带一些插件也可自己安装插件,插件使用前需先引入

webpack.config.js 中的基本配置快速了解

把当前src/目录下的index.js打包到当前dist/目录下的bundle.js,打包后的目录与文件会自动生成, 在命令框输入webpack运行即可

目录结构
webpack目录结构.png

webpack.config.js 中的配置

var path = require('path'); //node引入path模块
module.exports = {
    entry: "./src/index.js", //打包入口 
    output: {
        path: path.resolve(__dirname, 'dist'),//打包出口 path.resolve为node的路径拼接,表示当前文件夹下的**dist/**文件夹,若不存在会自动创建
        filename: "bundle.js", //打包的文件,不存在会自动创建
    }
}

配置完成后命令行输入webpack即可完成打包

webpack配置服务器和热更新

安装webpack-dev-server

npm install webpack-dev-server --save-dev

/webpack.config.js 中设置

devServer:{
        //设置基本目录结构
        contentBase:path.resolve(__dirname,'dist'),
        //服务器的IP地址,可以使用IP也可以使用localhost
        host:'localhost',
        //服务端压缩是否开启
        compress:true,
        //配置服务端口号
        port:8080
    }

运行webpack-dev-server 打开8080端口,即可使用webpack开启的服务器并热更新
如果不能运行在package.json中配置如下,运行npm run server

"scripts": {
    "server":"webpack-dev-server"
 },

基础入口和出口

入口

//入口文件的配置项
entry:{
    //里面的entery为入口,可写多个
    entry:'./src/index.js'
},

出口

//出口文件的配置项
const path = require('path'); //引入path模块

output:{
    //打包的路径属性 path.resolve为路径拼接,需引入node自带模块path
    path:path.resolve(__dirname,'dist'),
    //打包的文件名称
    filename:'bundle.js'
    
},

注:也可以做多入口多出口配置,本文不做演示

moudule模块配置

loader

loaders是Webpack最重要的功能之一,他也是Webpack如此盛行的原因。通过使用不同的Loader,Webpack可以的脚本和工具,从而对不同的文件格式进行特定处理。

  • test:用于匹配处理文件的扩展名的表达式,这个选项是必须进行配置的;
  • use:loader名称,就是你要使用模块的名称,这个选项也必须进行配置,否则报错;
  • include/exclude:手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选);
  • query:为loaders提供额外的设置选项(可选)。

图例为配置css打包需要用的两个loader,loaser有中使用语法灵活多变

module:{
        rules: [
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]
            }
          ]
    },

所有loader都是需要安装的

css打包

引入
在入口文件中引入css,webpack会自动对其打包,用commonJS或者es6的Moudel之类的模块化操作都可以

require('./main.css')

需要使用到的loader

  • style-loader 它是用来处理css文件中的url()等
  • css-loader 它是用来将css插入到页面的style标签。

安装

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

使用

   module:{
        rules:[
            {
                test:/\.css$/,
                loader:['style-loader','css-loader']
            }
        ]
    },

运行webpack即可打包成功,打包后的cssjs是打包在一起的

HTML文件的打包和发布

现在我们的项目结构是有问题的,我们把index.html直接放到了dist文件夹下,把打包后的js文件引入到html中这是不正确的,应该放到我们src目录下,打包后自动打包到dist文件夹下。

我们先把dist中的html文件剪切到src目录中,并去掉我们的JS引入代码(webpack会自动为我们引入JS

在此过程中我们需要使用到的插件html-webpack-plugin
对于插件的使用有些需要安装,使用前需要引入

安装

npm install --save-dev html-webpack-plugin

引入

const htmlPlugin= require('html-webpack-plugin');

使用

plugins: [
        new htmlPlugin({
            minify: {
                removeAttributeQuotes: true
            },
            hash: true,
            template: './src/index.html'
        }),
]
  • minify 是对html文件进行压缩,removeAttrubuteQuotes是却掉属性的双引号。
  • hash 为了开发中js有缓存效果,所以加入hash,这样可以有效避免缓存JS。
  • template 是要打包的html模版路径和文件名称。

运行webpack会发现html已经被打包到dist文件夹下,且去除属性双引号引入了打包后的js


到此,webpack基本使用就写到这,但你发现还是无法打包一个项目,打包过程中还有很多关于打包后图片路径的坑,很难解决,我会在下一篇文章中写我在使用时如何处理图片路径的一些坑

本文算是记录我使用webpack的一些笔记,并不详细,如有错误,欢迎指正

未经允许不得转载:王文健的博客笔记 » webpack 3.0+ (Ⅰ) 基础入门,练习模块打包基本配置

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. 王文健 (2018-02-09) 回复
Copyright & copy; 2018 @王文健. All rights reserved.

小编留言

本网站是作者学习路上的一个见证,记录和敦促我的学习生活,也希望借此结交更多前辈好友。记录作者在学习生活的点点滴滴,愿与你一同进步,共勉!

Copyright & copy; 2018 @王文健. All rights reserved.

感谢 WordPress DUX 提供的参考模板与设计,阿里云提供的优质云服务,使我完成本网站的制作