task46 初识webpack

作者: vivienYang2019 | 来源:发表于2019-07-31 16:58 被阅读0次

webpack官网到底是哪个？？？
https://webpack.docschina.org/
https://www.webpackjs.com/

webpack：从入门到真实项目配置
 git地址

工程化是什么鬼?

工程化

一、自动化

什么是自动化？
优化resume项目

1. sass和scss（优化css）

安装node sass(用来优化css)
https://github.com/sass/node-sass

//全局安装node-sass
npm install node-sass -g
//用node-sass把scss转成css格式
node-sass main.scss main.css

如果安装失败就去google "node sass 安装失败"

node sass的命令行接口

sass和scss的区别？？？
这个是ruby社区的人发明的，一开始发明的是sass，语法很简洁（没有{}），前端说看不懂，然后ruby社区就再发明了scss给前端用(有{})，sass自己用。

scss可以识别css的语法，把.css文件改成.scss文件不会报错
scss可以使用一些css不支持的语法（如层级嵌套），scss文件需要使用工具转化成css文件浏览器才能识别
安装node-sass，用命令行node-sass main.scss main.css可以手动把scss文件转成css文件

这样我们就可以写scss文件啦，但是浏览器不能识别scss文件，需要把scss转换成css才可以
但每次改动一下scss文件，都要用命令行转换成css才能生效，这样太不方便了，能不能自动转换呢？？
——可以，使用命令node-sass main.scss main.css -w

在命令行监听scss变化自动转css
改了main.scss后保存，main.css也会跟着改变，页面就会生效

2. babel（优化js）

ES6的语法如let在Chrome上可以用，但一些旧版本的IE上会报错。怎么办呢？有没有什么工具可以帮忙将ES6等新代码转成ie也可以识别的代码呢？
——babel
https://babeljs.io/setup#installation

安装babel(看最新版的文档，现在的版本和之前不一样了，安装方法也有区别)

Babel 可以让你使用 ES2015/16/17 写代码而不用顾忌浏览器的问题，Babel 可以帮你转换代码。首先安装必要的几个 Babel 库
npm i --save-dev babel-loader babel-core babel-preset-env
先介绍下我们安装的三个库：
babel-loader 用于让 webpack 知道如何运行 babel
babel-core 可以看做编译器，这个库知道如何解析代码
babel-preset-env 这个库可以根据环境的不同转换代码
（引用自https://zhuanlan.zhihu.com/p/30701816）

全局安装和项目安装有什么区别？

全局安装

全局安装的位置

项目安装

项目安装在了node_moudles路径

全局安装的位置在$PATH中

将src目录下的js文件都用babel转一下放到lib目录下

将src目录下的js文件都用babel转一下放到dist目录下

现在babel遇到了和写sass一样的问题，修改了js文件后需要用命令行手动转，能不能自动转呢？

babel自动监听js文件改动

现在就需要开两个命令行窗口，一个监听scss文件改动然后自动转换，一个监听js文件改动然后自动转换

推荐的目录结构

将css,js，html，img等都挪到src目录中

将html,js,css等文件都挪到src目录

修改后的目录结构

改成新的目录结构后，页面混乱了，那些js,css引用都会有点问题，怎么办呢？
之前的那些监听需要重新写input和output

使用node-sass监听css目录下的scss文件变化并翻译成css文件（-o目录 -w监听）输出

node-sass监听src目录下的scss文件并翻译成css后输出到dist目录下

使用babel翻译js文件

babel监听src/js目录下的js文件并翻译后输出到dist/js目录下

3. 自动监听html文件和img的变化并copy

现在有个问题，dist目录下只有css和js，没有html

dist
那么有没有命令可以监听html改动并自动copy到dist目录下呢
——watch命令 https://github.com/doowb/watch-cli

还要再开窗口
监听index.html文件变化了就把index.html从src目录拷贝到dist目录
监听img目录图片变化了就把img目录下的图片从src目录拷贝到dist目录

使用watch命令：监听到src/index.html文件改变了,就执行后面的命令cp src/index.html dist/index.html(把src目录下的index.html复制到dist目录下)

使用watch命令：监听到src/index.html文件改变

监听图片目录img

`（使用resume-15-5改成resume-15-9，自己改下试试）！！！`

git
git remote set-url origin git@xxxxxxx
再加个需求，每次改动css或js文件给引用的地方自动更新下版本号，解决缓存更新相关的问题

现在这样，每次写代码的时候都要开好多个命令行窗口，不够智能，能不能不用这么多呢？5个窗口一个命令完成，什么工具呢？
Grunt(过时了不用了)
Gulp(过时了不用了)
webpack

二、用webpack来代替这些命令行

前端语言多，需要的命令行多

1. webpack安装配置

https://github.com/webpack/webpack
安装webpack:
npm install --save-dev webpack

image.png

Get Started
https://webpack.docschina.org/guides/getting-started

找到配置Configuration相关的

webpack.config.js

//webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

新增并编辑webpack.config.js后，在命令行运行npx webpack

image.png

可以这样说，执行 npx webpack，会将我们的脚本 src/index.js 作为入口起点，也会生成 dist/bundle.js 作为输出。Node 8.2/npm 5.2.0 以上版本提供的 npx 命令，可以运行在开始安装的 webpack package 中的 webpack 二进制文件（即 ./node_modules/.bin/webpack）
npx webpack帮你去找本地目录的webpack

2. webpack babel安装配置

google搜webpack babel github（webpack如何配置babel）

image.png
https://github.com/babel/babel-loader

安装：npm install -D babel-loader @babel/core @babel/preset-env webpack
npm install -D：-D, --save-dev: Package will appear in your devDependencies.
配置webpack配置文件（webpack.config.js）

//webpack.config.js
module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

安装好并修改好webpack配置文件后，再在命令行输入npx webpack就可以啦
image.png

在src/js/目录下创建3个文件（moudle-1.js、moudle-2.js、app.js）

//moudle-1.js
function fn(){console.log(1)}
export default fn

//moudle-2.js
function fn(){console.log(2)}
export default fn

//app.js
import x from './moudle-1.js'
import y from './moudle-2.js'
x()
console.log('webpack test')
y()

修改下webpack配置文件↓

修改下webpack配置文件

重新webpack一下，三个js都输出到一个bundle.js里面↓

重新webpack一下，三个js都输出到一个bundle.js里面

3. webpack scss安装配置

在src/css路径下新建个main.scss，用webpack怎么把这个scss文件转成css文件呢？

搜webpack scss

image.png

(css)sass-loader (js)babel-loader

https://github.com/babel/babel-loader
https://github.com/webpack-contrib/sass-loader
https://webpack.docschina.org/loaders/sass-loader/

3.1 安装

npm install sass-loader node-sass webpack --save-dev
通过将 style-loader 和 css-loader 与 sass-loader 链式调用，可以立刻将样式作用在 DOM 元素
npm install style-loader css-loader --save-dev

3.2 修改webpack配置文件

// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: [
                "style-loader", // 将 JS 字符串生成为 style 节点
                "css-loader", // 将 CSS 转化成 CommonJS 模块
                "sass-loader" // 将 Sass 编译成 CSS，默认使用 Node Sass
            ]
        }]
    }
};

这时候运行npx webpack打包文件,发现没有加载css

没有加载css

3.3 在入口文件app.js中import css

//app.js
import x from './moudle1.js';
import y from './moudle2.js';
import '../css/main.scss'//引入css文件

再次npx webpack

webpack打包

//css文件：src/css/main.scss
body{
    background: pink;
    p{
        color:purple
    }
}

bundle.js中的css字符串

将scss转成css字符串添加到页面的style标签中

webpack帮你把css变成字符串，存储在bundle.js中，当页面运行的时候添加到页面的style标签中，等js执行了才加载css

use: [
 "style-loader", // 将 JS 字符串生成为 style 节点
 "css-loader", // 将 CSS 转化成 CommonJS 模块
 "sass-loader" // 将 Sass 编译成 CSS，默认使用 Node Sass
]

从下到上：

step1:sass-loader将sass/scss文件转化成css
step2:css-loader将 CSS 转化成 CommonJS 模块
step3:style-loader将 JS 字符串生成为 style 节点

现在我们可以把scss转成css了，并且添加到页面的style标签中

4. webpack一些其他的配置（如autoprefixer）

再加一些配置
比如说display:flex是有兼容性问题的，https://caniuse.com

image.png

怎么解决这些css在不同浏览器的兼容性问题呢？

一种方法是coding时手动加前缀（IE加前缀）

image.png

用工具自动帮你加-autoprefixer
在线autoprefixer css
在线autoprefixer css

那么我们想把autoprefixer加到webpack的配置中，怎么加呢？
google搜webpack autoprefixer
https://github.com/postcss/autoprefixer#webpack

image.png

不用autoprefixer-loader而是用postcss-loader！！！
https://github.com/postcss/postcss-loader

4.1 安装

npm i -D postcss-loader

4.2 配置

新增postcss配置文件：postcss.config.js

//postcss.config.js
module.exports = {
  parser: 'sugarss',
  plugins: {
    'postcss-import': {},
    'postcss-preset-env': {},
    'cssnano': {}
  }
}

修改webpack配置文件

//webpack.config.js
module.exports = {
  module: {
  //...
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'postcss-loader' ]
      }
    ]
  }
}

安装配置好了后运行npx webpack，报错Error: Loading PostCSS Plugin failed: Cannot find module 'postcss-import'

报错
找不到postcss-import就安装它： npm i -D postcss-import
同样的，也安装其他的postcss的插件（Plugin）和parser
npm i -D postcss-preset-env
npm i -D cssnano
npm i -D sugarss

image.png

parcel

webpack的理解

webpack打包速度慢的原因
https://zh.parceljs.org/

按照快速开始照着做一遍，就可以了

课后习题

使用 webpack
用 babel-loader 把 ES6 转译为 ES5
用 sass-loader 把 SCSS 转译为 CSS

同学答案
 我的答案

https://github.com/FrankFang/webpack-demo-1

网友评论

本文标题：task46 初识webpack

本文链接：https://www.haomeiwen.com/subject/ydoalctx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

task46 初识webpack

一、自动化

1. sass和scss（优化css）

2. babel（优化js）

3. 自动监听html文件和img的变化并copy

`（使用resume-15-5改成resume-15-9，自己改下试试）！！！`

二、用webpack来代替这些命令行

1. webpack安装配置

2. webpack babel安装配置

3. webpack scss安装配置

3.1 安装

3.2 修改webpack配置文件

3.3 在入口文件app.js中import css

4. webpack一些其他的配置（如autoprefixer）

4.1 安装

4.2 配置

parcel

课后习题

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读