webpack入门

最新推荐文章于 2023-10-10 09:51:34 发布

绅士1993

最新推荐文章于 2023-10-10 09:51:34 发布

阅读量102

点赞数

分类专栏：快速搭建 webpack 快速入门

本文链接：https://blog.csdn.net/aitanxiaofeng/article/details/101218339

版权

快速入门同时被 3 个专栏收录

30 篇文章 2 订阅

订阅专栏

快速搭建

6 篇文章 0 订阅

订阅专栏

webpack

3 篇文章 0 订阅

订阅专栏

需要安装的软件:
1.node.js
node.js自带npm
2.通过npm安装cnpm
3.切换npm到cnpm,安装webpack(cnpm国内镜像下载速度更快)

node.js JavaScript环境,可以不依赖后端直接前端部署服务
npm 下载工具
cnpm 下载工具(区别于npm仅仅为下载的包来自于国内,速度更快)
webpack 打包工具

作用:
1.打包,压缩多个静态文件为单个,减少二次请求,提高访问速度.
2.解析复杂的依赖

入门:
1.新建空项目,建文件和文件夹:

dist(用于打包输出的文件夹)
src
	js
	css
	index.html
	main.js(打包入口文件)

2.初始化npm,生成package.json配置文件:
npm init -y
3.html内容:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../dist/bundle.js"></script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
</body>
</html>

4.main.js内容:

import $ from 'jquery'

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

此时,jquery本项目没有包,需要先在本项目局部安装webpack: cnpm install --save-dev webpack@3.6.0,
在安装jquery到本地局部,用 i,而不是用install: cnpm i jquery -s
5.此时就可以使用webpack进行打包了:
webpack 被打包入口文件及其路径(.\src\main.js) 打包输出的文件及其路径(.\dist\bundle.js)
此时打包每次都得输入入口和输出路径,可以根目录新建webpack.config.js配置:

const path = require('path');//设置path为根目录

module.exports = {
    entry: path.join(__dirname, './src/main.js'),//入口路径
    output: {//输出路径
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    }
}

配置好后,打包只需要输入: webpack
倒是每次都需要手动输入webpack,需要进阶为热部署更方便
6.热部署:
安装:cnpm i -D webpack-dev-server@2.9.3 (过高不支持3.6.0的webpack),
在配置文件package.json文件中添加脚本:

"scripts": {
 "start": "webpack-dev-server --inline --hot --open --port 8080 --contentBase src",//自动刷新浏览器,热部署(不重新打包整个而是局部更新,异步刷新加载文件,不会整体刷新浏览器),自动打开浏览器,端口8080,启动后访问的路径
 }

输入命令: npm run start
会看到编译成功的提示,但是修改js后不会更新效果,bundle.js内的代码也没有改变.
原因:
热部署输出的bundle.js打包好的文件和dist文件夹中的并不是同一个文件,热部署是打包文件到内存中,访问localhost:8080/bundle.js可以找到此文件.
解决:
把index.html引入的…/dist/bundle.js改成/bundle.js,热部署成功!
7.把首页也设置部署到内存中,自动引入打包好的js,提高访问速度.
安装: cnpm i -D html-webpack-plugin
配置webpack.config.js:

const htmlWebpackPlugn = require('html-webpack-plugin');
...
 plugins: [
        new htmlWebpackPlugn({//页面生成到内存中
            template: path.join(__dirname, './src/index.html'),
            filename: 'index.html' //指定内存中生成页面名称
        })
    ],

8.css静态文件也实现自动打包
安装: cnpm i -D style-loader css-loader
在main.js中引入css文件:

import './css/index.css' //css格式本来是不能被支持识别的,安装第三方模块的编译插件才能识别

在webpack.config.js中配置:

   module: {
        rules: [
            {test: /\.css$/, use: ['style-loader', 'css-loader']}//loader执行顺序从右到左
        ]
    }

绅士1993

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack入门

需要安装的软件:1.node.jsnode.js自带npm2.通过npm安装cnpm3.切换npm到cnpm,安装webpack(cnpm国内镜像下载速度更快)作用:1.打包,压缩多个静态文件为单个,减少二次请求,提高访问速度.2.解析复杂的依赖入门:1.新建空项目,建文件和文件夹:dist(用于打包输出的文件夹)srcjscssi...
复制链接

扫一扫