Webpack 环境搭建

最新推荐文章于 2024-05-29 21:08:09 发布

彼岸大洋

最新推荐文章于 2024-05-29 21:08:09 发布

阅读量1.3k

点赞数

分类专栏： Webpack Web应用开发文章标签： Webpack入门

本文链接：https://blog.csdn.net/elie_yang/article/details/90543962

版权

Web应用开发同时被 2 个专栏收录

40 篇文章 1 订阅

订阅专栏

Webpack

5 篇文章 0 订阅

订阅专栏

使用webpack搭建环境前，需要有前瞻知识：比如：关于webpack是什么，能做什么以及webpack是基于Node.js环境，对Node.js的安装也是前提条件。一图胜千言，下面直接一步一步搭建环境，用图示方式说明：

当前实验的Node.js版本为：

步骤一：新建一个web项目：在本机磁盘新建一个文件夹：D:\tfs\web\gitTestProject

我这里使用vscode, 打开gitTestProject文件夹就可以了.

shift+鼠标右键，点击在此处打开Powershell窗口：

敲入命令：npm init -y 如果不带-y参数，则是向导式逐个询问提示，需要你填入项目的信息后生成package.json文件，带-y参数则是默认配置。这里入门学习暂时不用-y参数。

步骤二：安装webpack 和webpack-cli

-cli:common line interface命令行界面。为何还有安装他呢，是因为webpack版本更新太快，webpack 4.0将命令行相关的操作单独集成到了webpack-cli中。要使用高于webpack4.0，需要安装webpack-cli。

npm i -D webpack webpack-cli （npm i -D 是npm install --save-dev的简写），是指安装模块并保存到package.json的devDependencies 节点下：

步骤三：在项目根目录下新建三个文件：Index.html、main.js、webpack.config.js

Index.html ：启动页面

<html>
    <head>
        <meta charset="utf-8">
    </head>    
    <body>
        <div id="app">MyApp</div>
    </body>
</html>
<script src="./dist/bundle.js"></script>

main.js：入口模块，会用于webpack.config.js下的entry节点配置，这里它的内容为简单输出Hello,world

document.getElementById('app').innerText="Hello,world";

webpack.config.js 内如如下面代码：使用Node.js的功能，__dirname为Node.js的全局变量；output 节点配置webpack的打包输出路径及文件名称；

const path= require("path");
module.exports= {
    entry:"./main.js",
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,"./dist"),
    }
}

上面的webpack.config.js是我们手工添加的，也可以使用webpack-cli init 来使用如下图：这里直接手动输入最简单的配置。

关于npx是什么，请往下看。

步骤四：有了上面的准备工作后，如何运行Index.html页面呢？

1：利用vscode的插件live server启动一个web server 打开index.html页面。如下图所示：

此时浏览器自然不会输入Hello,world.（注意：vscode设置自动保存后，html页面的改变会通过live server自动更新，采用了websocket的机制通知）；

2:利用webpack构建输出：

webpack : 无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。

这个错误很常见：由于webpack非全局安装，自然找不到webpack命令，但本项目是有install webpack的，如何才能引导执行本项目的webpack命令呢？解决方法有：

方法一：执行：.\node_modules\.bin\webpack, （小技巧：在powershell 敲入命令时按tab键自动补充完整；）

此时页面输出了Hello,World

方法二：npx webpack, 不是npm哦，不要以为是拼写错了，npx是 npm新增命令：参考阮一峰blog:http://www.ruanyifeng.com/blog/2019/02/npx.html

引用一段文字：“npx 想要解决的主要问题，就是调用项目内部安装的模块”。这个不正是我们想要的功能吗?

方法三：如下图所示：

修改package.json的Scripts 节点：添加dev:webpack

然后:npm run dev;

此时页面同样输出了Hello,world字样；

步骤五：修改main.js里的输出为:document.getElementById('app').innerText="Hello,webpack";

发现浏览器还是：Hello,world, 刷新也不会有变化；此时需要npm run dev或npm webpack再次打包更新一次；无法自动更新。

这个要做到自动更新，也是so easy!

修改package.json文件下的scripts节点：把dev 配置值改为: "webpack --watch",让webpack监听文件的变化，当有变化时自动重新构建。

以上利用了webpack 自身提供的实时预览和live server提供的迷你Http服务器，如果开发编辑工具不是vscode,是其他的sublime、webstorm甚至是dreamweaver呢？

上面的功能可以利用webpack提供的DevServer来完成，

npm i -D webpack-dev-server

如果发现npm相当慢，可以切换成cnpm ,切换方式参考文章:npm配置项registry修改为淘宝镜像

在package.json中配置一下：

"scripts": {

"dev": "webpack-dev-server --devtool source-map"

--devtool source-map 表示开启源码映射，F12 可以看到source源码，调试代码方便使用。

执行npm run dev 时，默认开启了一个端口为：8080的http服务

注意：webpack-dev-server加载会启动webpack，但不会生成物理output文件，放在内存处理，注意引用路径的处理，防止页面报404错误。此处修改Index.html的 <script>引用：<script src="./bundle.js"></script>

步骤六：使用Loader处理 css

Loader: 为webpack的一种机制，webpack 只能处理javascript，但webpack视一切文件为模块，css文件也可以require到js脚本中当做模块处理，但webpack本身不能解析css，于是需要Loader的帮助，

例如：css-loader 则可以让js中载入一个css文件，并将读取到css文件当成一个模块使用，同理：style-loader 就是处理读取后的css内容，例如在页面中动态生成内嵌页面样式；

这里我们使用style-loader,css-loader , npm 先执行安装；

修改webpack.config.js

const path= require("path");
module.exports= {
    entry:"./js/main.js",
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,"./dist"),
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    }
}

特别注意：module 下rules 中test 的正则表达式：不要加引号，如：test :"/\.css$/",非常容易犯这个错误。

ERROR in ./css/index.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

在上面的测试项目中新增css/index.css文件，内容如下：

#app{ color: red;}

然后main.js加入css的引用，此时应该就可以看到样式生效了！

require("../css/index.css");//style-loader!css-loader!

步骤七：加入Plugin:

npm i -D extract-text-webpack-plugin

经过步骤六后 css文件被打包到了bundle.js中，也可以根据需要把css单独打包输出，就需要上面的Plugin了。

安装时报错的处理：Tapable.plugin is deprecated. Use new API on `.hooks` instead

使用下面的指令安装：npm i -D extract-text-webpack-plugin@next

此时package.json的完整配置为：

const path= require("path");
const ExtractTextPlugin = require ('extract-text-webpack-plugin');
module.exports= {
    entry:"./js/main.js",
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,"./dist"),
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                loader:ExtractTextPlugin.extract({
                    fallback:'style-loader',//如果不使用css提取，使用什么loader来处理css内容
                    use:'css-loader',
                    publicPath:"./dist"
                })
            }
        ]
    },
    plugins:[
        new ExtractTextPlugin({
            //打包后的文件路径以及文件名
            filename:'/css/[name][hash:8].css',            
        }),
    ]   
}

npx webpack后可以看到dist/css/目录下的变化：

步骤八：经过上面一步，打包生成的css还不能自动引入Index.html页面，于是再来一个插件html-webpack-plugin

const HtmlWebpackPlugin = require ('html-webpack-plugin');
module.exports= {
   ...
    plugins:[
        ...
        new HtmlWebpackPlugin ({
            template: path.resolve (__dirname, './index.html')
         }),
    ]   
}

执行npm run dev

此时可以看到css和js自动引入

webpack入门之旅结束，更多配置及Loader,Plugins的学习可以根据实际需要参阅资料，更多话题有待研究学习：比如Vue,React,Angular框架与webpack的结合使用，SCSS,LESS,Stylus等css预编译的处理，ES6语法的转化处理，发布正式上线及自定义Loader或Plugin等。IT有路勤为径，技海无涯苦作舟！

彼岸大洋

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Webpack 环境搭建

使用webpack搭建环境前，需要有前瞻知识：比如：关于webpack是什么，能做什么以及webpack是基于Node.js环境，对Node.js的安装也是前提条件。一图胜千言，下面直接一步一步搭建环境，用图示方式说明：当前实验的Node.js版本为：步骤一：新建一个web项目：在本机磁盘新建一个文件夹：D:\tfs\web\gitTestProject我这里使用vscode, ...
复制链接

扫一扫