webpack基本配置（一）--超详细版加问题解决

最新推荐文章于 2020-05-13 18:25:46 发布

Trista-

最新推荐文章于 2020-05-13 18:25:46 发布

阅读量390

点赞数 1

分类专栏：工具配置文章标签： webpack配置 webpack安装失败 webpack.config.js文件配置 webpack打包css、less、scss

本文链接：https://blog.csdn.net/weixin_44760923/article/details/99174882

版权

工具配置专栏收录该内容

3 篇文章 0 订阅

订阅专栏

关于webpack 4.0+基本配置的详细说明及问题解决

第一步：在安装webpack前，需要本地环境支持node.js
第二步：安装webpack的两种方式
第三步：创建文件项目
开始项目
第四步：使用`html-webpack-plugin`插件配置启动页面
- 安装
- 作用
第五步：配置处理第三方loader
- 注意：
总结

第一步：在安装webpack前，需要本地环境支持node.js

安装node.js (https://nodejs.org/en/ 8.11.1版本 )安装完成之后，就自动生成npm(包管理器)
node -v (测试node的版本号) ， npm -v(测试npm的版本号) -----这么做的目的是为了测试node环境有没有搭建完成
安装cnpm（类似于npm）
- 优势：它的服务器是在中国，运行速度会比较快
- 地址：https://npm.taobao.org/
- 在终端执行： sudo npm install -g cnpm–registry=https://registry.npm.taobao.org

第二步：安装webpack的两种方式

运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令
在项目根目录中运行npm i webpack --save-dev安装到项目依赖中
在4.0+版本中，除了安装webpack，还需安装webpack-cli才能运npm i webpack-cli -g进行全局安装

第三步：创建文件项目

建文件目录：mywebpack
在mywebpack 里面创建两个子文件夹src dist
- src文件夹中放自己的项目内容，分别创建css、js、images文件夹
  - 在src中同时创建一个index.html和main.js
  - main.js主要用于引入js文件，这样index.html中只需加载一个main.js就够了，不会造成Ajax请求
- dist文件夹存放打包好的要发布的文件（产品级内容）
  - 通过webpack工具，把main.js处理后生成的bundle.js文件放在这里

开始项目

问题1：若main.js文件中引用了ES6的高级语法，会报错

原因：因为浏览器不认识import这种高级的JS语法，需要使用webpack进行处理，webpack默认会把这种高级的语法转换为低级的浏览器能识别的语法；
解决：运行webpack 入口文件路径 -o 输出文件路径对main.js进行处理：

			//注意，对于4.0+版本，语法已经改变，要记得加上-o
			webpack .\src\main.js -o .\dist\bundle.js

问题2：每次编译完成都要重新输入上面语句，过于麻烦

解决：在项目根目录下，新建一个webpack.config.js文件进行相关配置，配置如下

const path = require('path');

module.exports = {
    //入口，表示要使用webpack打包哪个文件
    entry:'./src/main.js',
    //出口，输出文件相关的配置
    output:{
        path:path.resolve(__dirname,'dist'),//指定 打包好的文件输出到哪个目录中
        filename:'bundle.js'//指定 输出的文件名称
    }
};

配置好文件后，只需在终端输入webpack即可打包

webpack打包好的budle.js文件并没有存放到实际的物理磁盘上，而是直接托管到了电脑的内存中，所以，在项目根目录中根本找不到这个打包好的bundle.js

所以，在index.html中引入的bundle.js应该修改为如下

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

问题3：每次都要重新输入上面语句，虽然已简化但任然过于麻烦

想要每次保存即自动打包编译
解决：安装webpack-dev-server工具来实现
安装步骤：

运行npm i webpack-dev-server -D
用法和webpack的用法完全一样

问题4：运行`webpack-dev-server`报错！！！

原因：webpack-dev-server是在项目中本地安装的，而不是全局的，不能在终端上直接执行
解决：配置package.json文件，配置如下（推荐）

{
  "name": "mywebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
    //--open  是为了保存后直接打开浏览器
 	//--port 3000 修改浏览器的默认端口号，默认为localhost:8080
 	//--contentBase src 是浏览器默认打开文件为src文件，其实就是打开src文件下的index.html，而不是根目录
 	//--hot 热重载，不会每次都重新生成新的bundle.js文件，而是局部更新，减少不必要的更新，同时可以实现浏览器的无刷新重载
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.4.1",
    "webpack-dev-server": "^3.8.0"
  },
  "devDependencies": {
    "webpack": "^4.39.1",
    "webpack-cli": "^3.3.6"
  }
}

第二种配置方式：

首先在package.json文件下进行如下配置

	"dev": "webpack-dev-server"

其次在webpack.config.js中在原来的基础上添加以下配置：

const webpack = require('webpack');
module.exports = {
	devServer:{//这是配置dev-server命令参数的第二种形式，相对第一种更复杂
   	 	open:true,
    	port:3000,
    	contentBase:'src',
    	hot:true//启用热更新 第一步
	},
	plugins:[//配置插件的节点
    	new webpack.HotModuleReplacementPlugin()//new 一个热更新的对象  第三步
	]
}

第四步：使用`html-webpack-plugin`插件配置启动页面

安装

在终端中安装npm i html-webpack-plugin -D

在webpack.config.js中导入在内存中生成HTML页面的插件，注意：只要是插件，一定要放到plugins节点中去

const htmlWebpackPlugin = require('html-webpack-plugin')

plugins:[//配置插件的节点
	new webpack.HotModuleReplacementPlugin(),//new 一个热更新的对象  第三步
	new htmlWebpackPlugin({//创建一个在内存中生成HTML页面的插件
        template:path.join(__dirname,'./src/index.html'),//指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
        filename:'index.html'//指定生成页面的名称
    })
]

此时，生成的页面源码如下，在最底下自动增加了一个内存中的bundle.js的引用，则不再需要手动添加bundle.js的引用路径了，可注释掉

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="/bundle.js"></script>
</head>
<body>
<ul>
    <li>这是第1个li标签</li>
    <li>这是第2个li标签</li>
    <li>这是第3个li标签</li>
    <li>这是第4个li标签</li>
    <li>这是第5个li标签</li>
    <li>这是第6个li标签</li>
</ul>
<script type="text/javascript" src="bundle.js"></script></body>
</html>

作用

自动在内存中根据指定页面生成一个内存页面
自动将打包好的bundle.js追加到页面中去

第五步：配置处理第三方loader

注意：

webpack默认只能打包处理 JS 类型的文件，无法处理 其他的非 JS 类型的文件
如果要处理 非JS类型的文件，需要手动安装一些 适合第三方loader加载器

打包处理css文件：

安装npm i style-loader css-loader -D
在webpack.config.js中新增一个配置节点module

	module:{//这个节点，用于配置所有第三方模块加载器
       rules:[//所有第三方模块的匹配规则
          {test:/\.css$/,use:['style-loader','css-loader']},//配置处理.css文件的第三方loader规则
       ]
    }

同时在main.js中导入css文件

	import  './css/index.css'

打包处理less文件

安装npm i less-loader -D
安装npm i less -D
在webpack.config.js中新增一个配置节点module

	module:{//这个节点，用于配置所有第三方模块加载器
       rules:[//所有第三方模块的匹配规则
          {test:/\.less$/,use:['style-loader','css-loader','less-loader']}s//配置处理.less文件的第三方loader规则
       ]
    }

打包处理scss文件

安装npm i sass-loader -D
安装cnpm i node-sass -D(用npm很大情况会装不下来，推荐cnpm)
在webpack.config.js中新增一个配置节点module

	module:{//这个节点，用于配置所有第三方模块加载器
       rules:[//所有第三方模块的匹配规则
          {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}//配置处理.scss文件的第三方loader规则
       ]
    }

总结

index.html如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 将所有js文件导入放到main.js中 -->
    <!-- <script src="main.js"></script> -->
    <!-- <script src="../dist/bundle.js"></script> -->
    <!-- <script src="/bundle.js"></script> -->
</head>
<body>
    <ul>
        <li>这是第1个li标签</li>
        <li>这是第2个li标签</li>
        <li>这是第3个li标签</li>
        <li>这是第4个li标签</li>
        <li>这是第5个li标签</li>
        <li>这是第6个li标签</li>
    </ul>
</body>
</html>

main.js如下：

import $ from 'jquery'
//使用import语法，导入css样式表
import './css/index.css'
// 导入less样式
import './css/index.less'
// 导入scss样式
import './css/index.scss'

$(function(){
    $('li:odd').css('backgroundColor','blue');
    $('li:even').css('backgroundColor','pink');
})

webpack.config.js如下

const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    //入口，表示要使用webpack打包哪个文件
    entry:'./src/main.js',
    //出口，输出文件相关的配置
    output:{
        path:path.resolve(__dirname,'dist'),//指定 打包好的文件输出到哪个目录中
        filename:'bundle.js'//指定 输出的文件名称
    },
    devServer:{//这是配置dev-server命令参数的第二种形式，相对第一种更复杂
        open:true,
        port:3000,
        contentBase:'src',
        hot:true//启用热更新 第一步
    },
    plugins:[//配置插件的节点
        new webpack.HotModuleReplacementPlugin(),//new 一个热更新的对象  第三步
        new htmlWebpackPlugin({//创建一个在内存中生成HTML页面的插件
            template:path.join(__dirname,'./src/index.html'),//指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
            filename:'index.html'//指定生成页面的名称
        })
    ],
    module:{//这个节点，用于配置所有第三方模块加载器
        rules:[//所有第三方模块的匹配规则
            {test:/\.css$/,use:['style-loader','css-loader']},//配置处理.css文件的第三方loader规则
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},//配置处理.less文件的第三方loader规则
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}//配置处理.scss文件的第三方loader规则
        ]
    }
};

package.json如下

{
  "name": "MyProgram_webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev2": "webpack-dev-server --open --port 3000 --contentBase src --hot",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.4.1",
    "webpack-dev-server": "^3.8.0"
  },
  "devDependencies": {
    "css-loader": "^3.2.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "sass-loader": "^7.2.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.39.1",
    "webpack-cli": "^3.3.6"
  }
}

每次开启用npm run dev

Trista-

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
webpack基本配置（一）--超详细版加问题解决

关于webpack 4.0+基本配置的详细说明及问题解决第一步：在安装webpack前，需要本地环境支持node.js新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章...
复制链接

扫一扫