webpack4安装与学习

 

在慕课上学习了webpack的课程,做了一些笔记,算分享也算记录吧。教程里的是webpack1和现在的webpack4有很多区别,自己也走了不少的坑,最好使用的时候去看官方文档。

 

https://webpack.js.org/

在填坑的时候也借鉴了很多人写的文章。所以有很多部分是融合了超级多前人的经验总结,然后自己结合实际进行操作的做笔记。部分地方可能有重复,看得懂就好了。

1.全局安装webpack 

 npm install -g webpack

2.创建项目文件

初始化项目文件目录  npm init

到项目文件下安装webpack   npm install webpack

3.安装全局的webpack-cli    

npm install -g webpack-cli  //获取当前webpack版本号配置文件

4.配置mode 

默认有production和development两种模式可以设置

命令行设置   webpack --mode development

5.新建入口 

在项目文件目录下新建src文件夹,新建index.js文件入口

6.文件打包  

命令行输入 webpack --mode development 或 webpack --mode production

webpack将会默认打包,将./src/index.js文件打包成./dist/main.js文件(自动生成dist文件夹和main.js文件)

7.建立html文件

在项目目录下建立html文件,可以直接引用dist/main.js文件。

注意,我们的 script 引用的文件是 dist/main.js,而不是 index.js。这正是前端开发领域的一个趋势:开发的源文件(例子中的 index.js)与最终部署的文件(例子中的 dist/main.js)是区分开的,之所以这样,是因为开发环境与用户的使用环境并不一致。比如我们可以在开发环境使用 ES2017 甚至 ES2018 的特性,而用户的浏览器不见得支持 - 这也是 webpack 等打包工具的一个意义,它们能够辅助我们构建出在目标用户浏览器上正常运行的代码。

8.其他参数配置

我们如果需要配置webpack指令的其他参数,只需要在webpack –mode production/development后加上其他参数即可,如:

webpack --mode development --watch --progress --display-modules --colors --display-reasons

 

实时刷新

9.监控文件

watch选项最为直观,但在默认情况下,watch选项是关闭状态。

启用watch选项    webpack --mode development --watch

10.刷新浏览器(看官方文档容易填坑)

https://github.com/webpack/webpack-dev-server

https://webpack.js.org/configuration/dev-server/#devserver

webpack-dev-server,一个基于expressjs的开发服务器,提供实时刷新浏览器页面的功能。

webpack-dev-server是一个轻量级的服务器,修改文件源码后,自动刷新页面将修改同步到页面上:

①全局安装:npm install webpack-dev-server -g 

②在项目中安装并将依赖写在package.json文件中:npm install webpack-dev-server --save-dev

③使用命令webpack-dev-server --mode development --output-public-path src 完成自动刷新,指定publicPath,这部分很容易没有实时刷新。

④默认的端口号是8080,如果需要8080端口被占用,就需要改端口,webpack-dev-server --port 3000(将端口号改为3000),可以直接在webpack.config.js配置文件中配置devServer属性,开启热更新和port。

⑤启动服务,输入localhost:端口号,就显示发布的所有根目录,如果项目根目录中没有index.html文件,就会在浏览器中列出项目根目录中的所有的文件夹。

⑥当使用webpack-dev-server --mode development --output-public-path src命令时,在每次修改文件,是将文件打包保存在内存中并没有写在磁盘里,这种打包得到的文件和项目根目录中的index.html位于同一级。使用webpack命令将打包后的文件保存在磁盘中例如在index.html文件中引入通过webpack-dev-server --mode development  --output-public-path src打包的build.js

<script src="build.js"></script> //在index.html文件中引入通过webpack命令打包的build.js 

<script src="./build/build.js"></script>

--inline 内联模式,在开发服务器的两种不同模式之间切换。默认情况下, 应用程序将被启用内嵌模式。这意味着将在包中插入一个脚本来处理实时重装, 并且生成消息将出现在浏览器控制台中。

--hot 启用热模块更换功能

//////以上是搜索了各个教程里面说的,但是实际操作还是有问题,

index.html入口文件是在根目录下,没有进行配置content-base,因为配置了之后会只打包配置的目录文件,默认是根文件。配置了output的publicPath(很重要,删掉之后就不能自动刷新了,应该是webpack-dev-server将每次打包的文件根据output设置生成在publicPath目录下,而文件本身依旧是手动打包的,无法查看到自动刷新打包的文件),只配置了端口,没有配置hot:true和inline:true(最开始配置了,但是有报错,所以删掉莫名OK了)

⑦webpack自带的watch命令与webpack-dev-server的区别

--watch是文件修改后自动打包,webpack-dev-server是修改后发布到服务器上

⑧webpack-dev-server --mode development --content-base src --inline --hot//显示只针对src路径下的文件刷新,文件修改之后浏览器自动刷新,如果要打开的文件和打包的文件不在一个文件夹内,最好不要设定文件夹

 

11.打包css文件

在项目目录下安装处理css文件的loader

命令行输入:npm install css-loader style-loader --save-dev

css-loader //处理css文件
style-loader //将css-loader处理后的文件作为样式标签<style>插入到html文件中

在处理css文件的时候要指定loader,如在index.js文件里输入require('style-loader!css-loader!./style.css')

或者直接在命令行输入webpack --mode development --module-bind "css=style-loader!css-loader"

12--progress(查看进度)

13--display-modules(显示隐藏的模块)

14 --display-reasons(显示打包原因)

 

15.配置

webpack需要传入配置对象,因此进行新建配置文件webpack.config.js,或者使用node.js内置的path模块进行配置,并在它前面加上 __dirname这个全局变量。可以防止不同操作系统之间的文件路径问题,并且可以使相对路径按照预期工作。

①先写moudule.exports={};进行配置;

②入口文件配置,entry="入口文件路径,如./src/js/main.js";

③输出文件配置,output={path:__dirname+"输出文件路径,如/dist/js/bundle.js"};//要创建dist文件夹

__dirname为运行时的当前路径;

另一种方式,先定义const path = require("path");//引入nodejs的path模块

然后在输出文件路径path:path.resolve(__dirname,"./dist/js/bundle.js");

//path.resolve()方法解析了当前路径,将相对路径改为绝对路径。

④重新指定配置文件名

webpack --config 文件名

如webpack --config webpack.dev.config.js

16.定义执行脚本,可以在package.json中设置

在script中设置,如设置"webpack":"webpack --mode development --config webpack.config.js --progress --display-modules --colors --display-reason",//--colors(彩色显示)

直接执行上面的脚本npm run webpack

17.entry配置(chunk)

①字符串表示,单输入,所有依赖都要在入口文件中指定,如entry:"./src/js/main.js",

②数组表示,多输入,两个需要打包到一起的文件可以在配置文件的entry中用数组表示,如entry:["./app/entry1", "./app/entry2"],//这两个文件将会打包到一起

③对象表示(哈希),多页面入口,entry:{page1:"./page1",page2:["./src/a.js","./src/b.js"]},

这三种方式都会把文件打包到输出文件中。

18.output配置

①单个入口起点,就设置一个出口,如output:{filename:'bundle.js',path:'/dist/js'}

②多个入口起点,可以设置name或者hash,如output:{filename:'[name].js',path:__dirname+'/dist/js'}

或output:{filename:'[name]-[hash].js',path:__dirname+'/dist/js'}

或output:{filename:'[name]-[chunkhash].js',path:__dirname+'/dist/js'}

hash值可以认为是版本号或者MD5值保证每个文件的唯一性,每一次修改之后生成文件的hash值不一样,文件名不一样。

③publicPath可以理解为占位符。当需要上线的时候可以将服务器地址设置到这个参数中,output:{path:'xxx',filename:'xxx',publicPath:'http://cdn.com/'}

 

插件(plugin)

插件是 webpack 的支柱功能。webpack 自身也是构建在 webpack 配置中用到的相同的插件系统之上。插件目的在于解决 loader 无法实现的其他事。

19.插件html-webpack-plugin

要引用之前先安装,在项目文件目录下安装 npm install html-webpack-plugin --save-dev

安装好之后,在webpack.config.js配置文件中对插件的引用

var htmlWebpackPlugin = require('html-webpack-plugin');//commonJS写法

在module.exports中添加plugin部分进行插件初始化,

插件列表,当多个bundle需要共享一些相同的插件时,CommonChunkPlugin可以将这些依赖项提取到一个共享包中,以免重复。

plugins:[

    new webpack.optimize.CommonsChunkPlugin({

        .....

    }),

    new htmlChunkPlugin({

        template:'index.html',//自定义模板

        filename:'index-[hash].html',//生成文件名

        inject:'head',//指定链接注入在<head>标签中还是<body>标签中,为false值时表示不自动注入文件中,需要手动设置

        title:'webpack demo',//传递参数,可以在index.html模板中引用

        minify:{//压缩html文件,具体参数设置可以查看官方文档

            

        }

    })

]

index.html引用配置文件中的参数,JS语法模式,要使用JS语句可以使用<%%>将每行代码包裹起来。赋值可以使用<%=xxx %>,如<%=htmlWebpackPlugin.options.title%>就可以取到配置文件中定义的title的值。

在配置文件中可以任意的配置参数向html文件进行传参。

自定义引用的js文件可以直接写到html文件中

如在html文件中相对应的位置写,

<script src="<%=htmlWebpackPlugin.files.chunks.main.entry %>"></script>

<script src="<%=htmlWebpackPlugin.chunks.a.entry%>"></script>

chunk是文件入口

以上是单文件引用的示例,多文件引用则需要调用多次的html-webpack-plugin插件,设置方式相同

多页面使用同一个页面模板,可以定义htmlWebpackPlugin插件中的chunks参数,进行设置不同的页面引用不同的chunks,如设置chunks:['main','a']

excludeChunks:['a'],//指出排除的chunk

直接将公共初始化脚本嵌入到html页面中,inline方式,在html模板中加上脚本源码引用代码,

<script type="text/javascript">

<%=compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source()%>

</script>

//.substr()的作用是将删除publicPath部分的绝对路径获取文件的相对路径。

按照文件顺序引用js文件可以手动设置for循环出htmlWebpackPlugin.files.chunks的entry值插入文件中。

 

 

20.loader

loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。

 

本质上,webpack loader 将所有类型的文件,转换为应用程序的依赖图(和最终的 bundle)可以直接引用的模块。

loader能够import导入任何类型的模块。

在webpack的配置中loader有两个目标:

①.test属性,用于表示出应该被对应的loader进行转换的某个或某些文件。

②.use属性,表示进行转换时,应该使用那个loader。

使用方式:

①配置,在webpack.config.js中指定

②内联,在每个import语句中显示指定loader

③CLI,在shell命令中指定

 

在webpack.config.js中配置loader

在module.exports中添加属性module

如安装babel插件(js编译器),使用此插件转换ES6代码,如何安装根据官网进行安装:

module:{

    rules:[

       { test:/\.js$/,

        exclude:/node_modules/,

        loader:"babel-loader"

        }

    ]

}

设置preset,指定preset(预配置)设置如何处理js文件

①在rules中设置query:{presets:['latest']}

②在根目录下创建一个.babelrc文件,其中内容为:

{

    "presets":["env"]

}

③在package.json中,增加babel属性:

"babel":{

"presets":["latset"]

}

 

21.优化

可以在配置文件中,设置打包范围,如exclude设置不处理哪些模块,include处理哪些文件下的内容。

具体可以看官方文档进行配置。

 

展开阅读全文

没有更多推荐了,返回首页