vue实战--webpack基本使用

安装webpack

• 全局安装：npm i -g webpack
  
  • 目的：在任何目录中通过CLI使用 webpack 这个命令

• 项目安装：npm i -D webpack

  • 目的：执行当前项目的构建

  安装失败：目录下存在一个以前的jQuery包
  

  安装成功

使用实例

思路

• 1 使用npm init -y 初始package.json，使用npm来管理项目中的包
  

• 2 新建 项目目录结构及index.html和main.js，实现隔行变色功能
  

main.js文件
// 通过 ES6 的 import 关键字，来导入jquery包文件
// 1 通过npm下载jquery：npm i -S jquery
// 2 下载好的包，就会被放到 node_modules 文件夹中
// 3 通过 import 导入包，将来就会自动从 node_modules 文件夹中找到这个包，并且导入
import $ from 'jquery'

// 实现隔行变色
$('#list > li:odd').css('backgroundColor', 'red')
$('#list > li:even').css('backgroundColor', 'yellow')

$('li').css({
    marginBottom: 10,
    fontSize: 30
})

index.html
<ul id="list">
  <li>这是第01个li元素li>
  <li>这是第02个li元素li>
  <li>这是第03个li元素li>
ul>


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

• 3 运行webpack src/js/index.js dist/bundle.js进行打包构建，语法是：webpack 入口文件 输出文件
  

webpack的基本使用：
1 通过命令行的方式（webpack命令需要在根目录中运行）
webpack 入口文件 出口文件
webpack ./src/js/main.js ./dist/bundle.js
2 通过 配置文件的方式使用webpack
在项目的根目录中创建一个名字：webpack.config.js 的文件
在这个js文件中，通过代码的形式配置webpack
在项目的根目录运行命令：webpack

创建webpack配置文件webpack.config.js

// path 是NodeJS内置的模块，无需额外的下载，直接使用即可
var path = require('path')

// 导出模块内容
module.exports = {
  // 入口
  // __dirname 表示当前配置文件（webpack.config.js）所在的目录
  // path.join 将两个路径合并为一个绝对路径！！！
  entry: path.join(__dirname, './src/js/main.js'),

  // 出口
  output: {
    // path 表示出口文件生成的目录
    path: path.join(__dirname, './dist'),
    // filename 表示出口文件的名称
    filename: 'bundle.js'
  }
}

• 4 注意：需要在页面中引入 输出文件 的路径（此步骤可通过配置webpack去掉）

webpack-dev-server

• 安装：npm i -D webpack-dev-server
• 作用：配合webpack，创建开发环境（启动服务器、监视文件变化、自动编译、刷新浏览器等），提高开发效率
• 注意：无法直接在终端中执行 webpack-dev-server，需要通过 package.json 的 scripts 实现
  

配置package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --contentBase ./src --port 3000 --hot"
  },

配置说明

• –contentBase ：主页面目录
  
  • –contentBase ./：当前工作目录
  • –contentBase ./src：webpack-dev-server 启动的服务器，我们在浏览器中打开的时候会自动展示 ./src 中的 index.html 文件
• –open ：自动打开浏览器
• –port ：端口号
• –hot ：热更新，只加载修改的文件(按需加载修改的内容)，而非全部加载

使用

npm run dev

配置- webpack.config.js

const webpack = require('webpack')

devServer: {
  // 服务器的根目录 Tell the server where to serve content from
  // https://webpack.js.org/configuration/dev-server/#devserver-contentbase
  contentBase: path.join(__dirname, './src'),
  // 自动打开浏览器，此处配置open等的话package.json中就不必配置了
  open: true,
  // 端口号
  port: 3000,

  // --------------- 1 热更新 -----------------
  hot: true
},

plugins: [
  // ---------------- 2 启用热更新插件 ----------------
  new webpack.HotModuleReplacementPlugin()
]
}

html-webpack-plugin 插件

• 安装：npm i -D html-webpack-plugin
• 作用：根据模板，自动生成html页面
• 优势：页面存储在内存中，自动引入bundle.js、css等文件
  

/* webpack.config.js */
const htmlWebpackPlugin = require('html-webpack-plugin')

// ...
plugins: [
  new htmlWebpackPlugin({
    // 模板页面路径
    template: path.join(__dirname, './src/index.html'),
    // 在内存中生成页面路径，默认值为：index.html
    filename: 'index.html'
  })
]