webpack基本使用

step1:创建一个项目录
注意：项目名一般不要带中文
step2: 创建package.json

npm init

或者：

npm init -y ——————直接略过所有问答，全部采用默认答案

step4: 处理第三方文件
html文件中需要引入多个js文件或者第三方模块(例如：jquery.js)，只引入项目js入口文件(main.js),其他js文件均在入口文件中导入。导致可能JS文件中使用了浏览器不识别的高级语法:

1.全局安装webpack 和 webpack-cli
2.【webpack 入口文件路径 -o 出口文件路径 】———打包文件
3.【webpack 入口文件路径 -o 出口文件路径 mode=development|webpack --mode=production】———指定打包模式

总结：webpack可以做两件事情况：

处理JS文件的互相依赖关系；
处理JS的兼容问题，把高级的、浏览器不识别的语法，转为低级的，浏览器能正常识别的语法

step5:配置入口文件和出口文件
每次修改js文件，手动输入命令：webpack 入口文件路径 -o 出口文件路径重新打包，每次都要输入入口文件和出口文件，麻烦。可以在项目目录下建立配置文件webpack.config.js,指定入口文件和出口文件:

var path = require('path')
module.exports = {
        entry : path.join(__dirname,'./src/main.js'),
        output : {
            path : path.join(__dirname,'./dist'),
            filename : 'bundle.js'
      }
 }

重新打包：

webpack --mode=development|webpack --mode=production

step6:实现自动打包编译
每次修改js文件，都要手动重新打包，还是麻烦？使用 webpack-dev-server这个工具，来实现自动打包编译的功能。

npm i webpack-dev-server -D ————— 把这个工具安装到项目的本地开发依赖

webpack-dev-server这个工具，如果想要正常运行，要求在本地项目中必须安装webpack

【npm i webpack -D】————————本地安装 webpack

在package.json文件中配置命令：

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

在终端中执行命令：

npm run dev

注：在终端执行npm run dev，就等于执行webpack-dev-server命令。这将在node中开启一个服务器，并且立即打包。每次修改文件，ctrl + s 保存文件,webpack-dev-server工具自动监听文件改变，并且自动打包。

改变文件引用路径：
执行上述命令后终端会有类似信息输出：
【 Project is running at http://localhost:8080/】——webpack-dev-server工具将项目托管到localhost:8080/端口上

【webpack output is served from /】——打包好的文件通过localhost:8080/bundle.js访问

【Content not from webpack is served from C:\Users\yfb\Desktop\前端学习案例4.27\wabpack\Demo_1\src】——不是通过webpack打包的文件，则是以src为根目录访问。

该项目根目录下并不存在bundel.js文件，我们可以认为webpack-dev-server把打包好的文件，以一种虚拟的形式托管到了咱们项目的根目录中，虽然我们看不到它，但是可以认为和 dist、src、node_modules平级，有一个看不见的文件，叫做 bundle.js。其实是为了频繁打包，提高效率，直接把打包的文件放在内存中。

因为项目托管到新服务器，现在应该访问的是该服务器下的项目，文件引用路径也要改变:

 ————打包的js文件引用路径

http://localhost:8080/src/index.html————访问地址

step7:自动打开浏览器进行访问、配置端口号、指定托管的根目录、热重载（只是修改补丁，不重新生成整个bundle.js文件）
在package.json中配置命令，并重启服务器：

"scripts": {
        "dev" : "webpack-dev-server",
        "dev2": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  }

step8:使用html-webpack-plugin插件
使用--contentBase指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性。

安装html-webpack-plugin插件：

npm i html-webpack-plugin -D

在webpack.config.js配置文件中配置插件：

var htmlWebpackPlugin = require('html-webpack-plugin');
    module.exports = {
        plugins:[ // 添加plugins节点配置插件
            new htmlWebpackPlugin({
                template:path.resolve(__dirname, 'src/index.html'),//模板路径
                filename:'index.html'//自动生成的HTML文件的名称
            })
        ]
    }

html-webpack-plugin插件的两个作用：

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

step9:处理样式文件
html文件中需要引入css、less、sass样式文件。默认情况下，webpack处理不了这些样式文件。

处理css文件：

在项目的JS入口文件（main.js）中引入：
import './css/index.css'
下载依赖css-loader和style-loader到项目目录下：
npm i style-loader css-loader --save-dev
webpack.config.js中配置：

module: { // 用来配置第三方loader模块的
   rules: [ // 文件的匹配规则
       { test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则
   ]
}

处理less样式文件

在项目的JS入口文件（main.js）中引入：
import './css/index.less'
下载依赖less-loader、css-loader和style-loader到项目目录下：
npm install --save-dev less-loader less
webpack.config.js中配置：

webpack基本使用

你可能感兴趣的:(webpack基本使用)