【理解】前端Webpack开发流程

前端开发详细流程|前端原生开发框架|构建前端自动化开发环境

Webpack篇

开始着手项目打包的一些东西,还不是特别懂,一边学习,一边做笔记好啦。

1.webpack的概念。

Webpack 是当下最热门的前端资源模块化管理和打包工具。任何形式的资源都可以视作模块,通过 loader 的转换。有两个优点:1.减少http请求。2.减少静态文件的体积。

2.webpakc的安装。

(1)在node.js 用npm 全局安装Webpack: npm install webpack -g
通过webpack -h 测试。

(2)进入项目目录。通过npm init创建 package.json。安装webpack依赖 npm install webpack –save-dev
使用命令webpack + xx(需要打包的js名称) + xx(打包后的js名称)。使用动态表达式require绑定js文件,加载依赖。

(3)打包css ,首先需要先安装loader : npm install css-loader style-loader –save-dev
1.特别注意如果引用css的时候,打包需要在路径中添加css-loader!,在运用到页面中需要添加style-loader!。
2.使用webpack entry.js bundle.js –module-bind ‘css=style-loader!css-loader’语句就不需要在路径中引用那些loader了,在后面添加–watch进入监视者模式,–progress 可以看到打包过程,–display-modules 列出打包的模块,–display-reasons 列出打包的原因。

3.webpack的配置文件。

(1)简历项目webpack来配置文件。首先创建目录。

src里面还分别创建script、style文件。来放置js文件跟css文件。
dist 存放打包好的js文件。
(2)系统会默认搜索webpack.config.js这个配置文件, 或者使用 webpack –config +xx(配置文件名)来指定配置文件。
webpack.config配置代码

//模块化输出
module.exports = {
    //打包入口
    entry: ‘./src/script/main.js’,
    output: {
        //打包文件放在哪里
        path: ‘./dist/js’,
        //打包文件名
        filename: ‘bundle.js’
    }
}

在有配置文件的状态下,只需要运行 webpack就能编译打包。
(3)如果需要加特别的参数来输出,需要在package.json文件里面配置。
webpack –display-modules 显示所以的文件。
webpack –display-reasons 会显示所以文件的原由,哪个地方用了,从哪里引用。
webpack -d 会生成一个devtool(管理文件上下文的东西)sourcemap文件。
webpack -p 文件优化、压缩。
webpack -w 开启监视者模式。

配置输出

“scripts”: {
    “test”: “echo \”Error: no test specified\” && exit 1″,
    //可以在这里添加你想要输出的命令。
    “webpack”: “webpack –config webpack.config.js –progress –display-modules –colors –display-reasons”
},

使用 npm run webpack 编译。

(4)配置参数的详解
1.entry 表示入口文件的路径。它有三种写法针对不同的情况。
1.只写一个单一的路径:entry: ‘./路径/.xxx.js’’
2.写一个数组: entry:【‘./路径/.xxx.js’,‘./路径/.xxx.js’’】(这个也只打包了一个文件)
3.可以写 一个对象key 加 value的形式:注意这种写法需要修改 output.filename值才有效果。
entry的对象写法

entry: {
    page1: ‘./page1’,
    page2: [‘./page2’, ‘./page3’]
}

2.output.filename 这里不要写绝对路径且不要写路径,只需要写文件名。
(1)如果entry入口文件有第三种情况的写法,需要更改filename的文件名。
(2)name 输出跟入口文件同样的文件名。
(3)hash 就是本次编译打包的hash值。(两个hash值是一样的)
(4)chunkhash 是系统的hash值,也可以理解为版本号,只有当文件修改了再打包的文件才会更新这个值。

3.插件。(更新html,因为每次打包好的js文件名是不一定的,所以html引用的js的名字不确定,所以需要插件来解决这个问题。)

1.github 一个不错的插件wiki,list of plugins
(1)先使用命令安装插件 npm install html-webpack-plugin –save-dev.
(2)在配置文件中引用:var htmlWebpackPlugin = require(‘html-webpack-plugin’)。
(3)在配置文件中添加一个属性:
html插件的配置

plugins: [
    new htmlWebpackPlugin({
        //如果不加参数只是生成一个新的html文件。
        //设置模版
        template: ‘index.html’,
        //更改html的名字,跟更改打包文件名相同。
        filename: ‘index-[hash].html’,
        //还可以制定生成的脚本放在那个地方
        inject: ‘head’
    })
]

context:上下文选项用来决定根目录(既绝对路径)的入口文件。

(4)更复杂的功能。把plugins里添加的属性显示到html文件中。
在html文件中写类似js模版语言,需要用<%= %>的格式包裹起来。如果是编写js代码的话就不需要中间的= 号。
搜索到一个每一个属性详细的配置,需要的可以过来看看html-webpack-plugin
1.既然能用代码的形式拿到数据,知道了结构,那么换一种方式就可以用模版语言的方式引用js文件。
在html标签里面要用 <%= htmlWebpackPlugin.options.xx(这里写属性) %> 另外,需要打印属性跟值的时候加上JSON.stringify解析成字符串。
2.在output.publicPath:这里可以写上线的地址前缀。
3.多应用的页面处理。
(1)在entry添加多个入口文件。
(2)新建相同个数的new htmlWebpackPlugin,设置不同的文件。
(3)为了解决生成的html载入对应的js文件,可以使用两种方法:
1.使用chunks浏览器传参的方式:chunks:【‘a’】。
2.使用excludeChunks排除串口的方式:excludeChunks:【‘b’,‘c’】。
(4)减少http请求,把js初始化代码直接写到页面中。
1.htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)获取的值没有publicPath值。
2.拿到这个值之后使用webpack官方给的api compilation.assets[包裹获取的值].source() 这样就获取的不是地址,而是js内容了。
3.使用模版语言判断引用js。
4.特别注意inject是开启是否自动生成<script>标签。excludeChunks排除串口在 <script>模块生成也能能起到一个筛选的作用。

(5)loader。
1.loader 的三种配置方式。
1.loader in require 直接 在require文件的时候在路径中添加对应的loader。
2.CLI 在编译的的语法中添加 –module-bind + 对应的loader。
3.Configuraion 在配置文件中添加一个数组,添加对于的loader。
2.Configuraion 配置步骤。
1.先在Babel安装好babel-loader。npm install –save-dev babel-loader babel-core
2.配置presets属性,转换为Latest(包含es2015、2016、2017),安装Latest插件。
在configuraion 配置loader

//配置loader
module:{
   loaders: [{
       //匹配以js结尾的文件
       test: /\.js$/,
       //使用babel-loader
       loader: ‘babel’,
       //为了解决加载速度的问题,可以排除不要扫描的文件夹
       exclude: ‘./node_modules’,
       //有时候排除了也无法解决问题,那就只能指定文件夹
       include: ‘./src/’,
       //如果上面的两个方法也没效果,使用node的方法指定绝对路径。
       //1.引用node的api ,var path = require(‘path’);
       //2.exclude: path.resolve(__dirname , ‘node_modules’),include: path.resolve(__dirname , ‘src’),
       //用query参数指定插件解析js。
       query: {
           //解析js的特效 安装latest npm install –save-dev babel-preset-latest
           presets: [‘latest’]
       }
   }]
},

babel也可以配置
babel的配置

//这个是给es6语法做转义,stage-数字越小,转义的东西越多。
//plugins 是下载其他第三方模版,在模版文件夹里可以找得到相应的配置。
babel: {
    presets: [‘es2015’, ‘stage-0’],
    plugins: [‘transform-runtime’]
}

3.使用配置文件loader css。
*npm 官网 npm
(1)打包自动对css做处理,安装postcss-loader后处理器 npm install postcss-loader –save-dev
npm install autoprefixer –save-dev 添加css浏览器前缀。
(2)直接添加新的对象,配置。如果有css文件中import其他css,修改成css-loader?importLoaders=1就好了。
(3)安装less npm i less 安装less-loader npm i less-loader –save-dev sass同理,如果有import文件,不需要做处理。

4.使用配置文件loader 模版文件。
(1)不管是哪种模版先要下载对应的loader:npm install html-loader –save-dev
(2)在配置文件loaders中做对应的设置。
(3)ejs 跟tpl格式是相同的。

5.图片的配置。
(1)安装file-loader打包图片,不管是css还是原HTML都会打包成功,注意如果是模版打包绝对路径没有问题,相对路径需要处理<img src=”${ require(‘../../assets/head.jpg’) }”>
(2)安装url-loader。
url-loader

{
    test: /\.(jpg|png|gif)$/i,
    loader: ‘url-loader’,
    query: {
        //设置一个值,如果大于这个值已原来的格式打包,小于则打包成best64的图片。
        //best64的图片每一张都是独立的,所以导致js、html文件变得很大,正常的图片的好处就是会有缓存。
        limit: 40000,
        //路径/ 名字/ hash/ 后缀名
        name: ‘assets/[name]-[hash]-[ext]’
    }
}

(3)压缩图片image-webpack-loader 建议跟file-loader 或者 url-loader搭配使用。
image-webpack-loader

{
    test: /\.(jpg|png|gif)$/i,
    loaders: [
        //简写,可以把写成一个请求的方式。
        ‘url-loader?limit=2000&name=assets/[name]-[hash:5].[ext]’,
        ‘image-webpack-loader’
    ]
}

还有很多其他图片的配置,详情见npm官网。

(4)如果直接使用npm install jquery –save-dev,把jquery打包到项目中。
这样的方法非常方便,jquery没有存在于全局项目中,只有你需要用到它的地方才存在。

(5)webpack的热加载(可以理解为当文件发送改变,浏览器会自动刷新)
1.先运行 webpack-dev-server –inline –hot 开启热加载。
2.默认都是localhost:8080 端口,访问这个端口就行了。

(6)关于vue的webpack的打包。
1.运行 npm install vue vue-loader
2.在配置文件中,配置vue-loader。
特别注意,vue的两种模式独立创建跟运行时创建。运行时创建不支持template,webpack就是运行时创建。所以需要添加额外的配置。
vue的配置

resolve: {
    alias: {
     ‘vue$’: ‘vue/dist/vue.common.js’
    }
}

3.然后在入口文件引用vue,不管是全局引用还是单文件应用都可以。

(7)区分线上文件,线下环境。
在配置文件中添加var debug = process.env.NODE_ENV !== ‘production’;
如果是true 就是线下环境,为false就是线上环境。接着就可以用三元运算符来判断环境。

(8)分析项目webpack的小工具。什么信息都能以一个很好的形式展示。
1.先运行 webpack –profilt –json > stats.json 把项目的配置都放到这个json文件里面。

  1. 分析工具的github地址 导入json文件。然后就会展示各种信息。
    3.webpack visualizer,同样导入相同的json文件,也会展示信息。

顺便贴上webpack的中文文档,便于学习。webpack中文文档

atom配置前端开发环境|vs前端开发环境搭建|前端开发环境和生产

» 本文来自:前端开发者 » 《【理解】前端Webpack开发流程》
» 本文链接地址:https://www.rokub.com/3980.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!