webpack demo

1.进入命令行，创建文件夹mkdir webpackdemo，进入文件夹cd webpackdemo

2.对项目进行初始化（npm init），目的是为了生成package.json文件。ps：一路回车即可，内容后面也可修改

3.安装webpack之前查看node是否安装 node -v，webpack安装分为全局安装（npm install webpack -g）和局部安装（npm install webpack --save-dev），安装完毕可以查看一下（webpack -v）ps:官方推荐局部安装，毕竟不是所有项目都用到webpack;--save是指要保存到package.json中，-dev是指开发环境使用这个包生产环境不用

4.在文件夹中创建dist文件夹和src文件夹。src文件夹存放所编写的javascript代码，用于开发环境；dist文件夹存放webpack打包好的文件，用于生产环境。

5.在dist文件夹下创建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>webpack</title>
</head>
<body>
    <div id="title"></div>
    <script src="./bundle.js"></script>
</body>
</html>

bundle.js文件此时还没有，是webpack打包后生成的文件

6.在src文件夹下创建entry.js文件即入口文件。内容如下：

document.getElementById("title").innerHTML = "Hello World"

第一次Webpack打包（webpack src/entry.js -o dist/bundle.js）,打包成功之后dist目录下会出现bundle.js文件，此时live-server打开网页即可看到dist内出现Hello World

入口出口文件配置：在项目文件夹根目录创建webpack.config.js，内容如下：

const path = require('path');
module.exports={
    //入口文件的配置项
    entry: {
        entry: './src/entry.js'
    },
    //出口文件的配置项
    output:{
        //获取了项目的绝对路径,node写法
        path: path.resolve(__dirname, 'dist'),
        //打包后的文件名称，也可写成[name].js即打包后生成同名文件
        filename: 'bundle.js'},
    //模块：例如解读CSS,图片如何转换，压缩
    module:{},
    //插件，用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}

配置服务和热更新：下载webpack-dev-server（npm install webpack-dev-server --save-dev）,完成后配置devServer.

devServer:{
        //设置基本目录结构，配置服务器基本运行路径，用于找到程序打包地址
        contentBase:path.resolve(__dirname,'dist'),
        //服务器的IP地址，可以使用IP也可以使用localhost
        host:'localhost',
        //服务端压缩是否开启
        compress:true,
        //配置服务端口号
        port:8081
    }

在package.json中配置scripts选项，内容如下：

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

此时已配置完成，打开服务器（npm run server）在浏览器地址栏输入http://localhost:8081即可。

css文件打包（Webpack在生产环境中一个重要的作用就是减少http请求数，即把多个文件打包到一个js里）

webpack通过不同的Loader对不同的文件格式进行特定处理。例：将SASS文件的写法转换成CSS，而不再用其他转换工具；将ES6/ES7的代码装换成大多数浏览器兼容的JavaScript代码。所有的Loaders都需要npm单独安装并且在webpack.config.js内配置。配置型如下：

test：用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的；
use：loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错；
include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
query：为loaders提供额外的设置选项（可选）。

在src内创建index.css文件，内容如下：

body{
    background-color: red;
    color: white;
}

创建完成后要引入到入口文件中才能打包，在src/entry.js文件中加入：

import css from './css/index.css'

引入后需要使用loader解析css文件，这里需要下载两个loader，即style-loader（npm install style-loader --save-dev）和css-loader（npm install css-loader --save-dev）。

下载安装好后需要在webpack.config.js的module属性中配置：

module:{
        rules: [
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]
            }
          ]
    },

某茶

发布了12 篇原创文章 · 获赞 3 · 访问量 3518

私信关注

猜你喜欢