webpack2的配置

最新推荐文章于 2023-02-24 12:15:00 发布

qq_35534823

最新推荐文章于 2023-02-24 12:15:00 发布

阅读量652

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_35534823/article/details/73472474

版权

什么是webpack？

按我现在的理解，webpack是一个静态资源打包工具。把js，css，less，scss，图片等资源压缩合并，然后打包成上线版本。

这里写图片描述

如何在自己项目中使用webpack2？

1，安装webpack

npm install webpack -S

2，配置webpack.config.js文件
先来个简单的配置：

// webpack和Node一样，都是遵循common.js 所以这里是require来引用文件。 path是node的core文件，不需要手动安装，直接可以引包来使用
const path = require('path');

module.exports = {
    // 配置入口文件
    entry: './main.js',  
    // 配置出口文件 
    output: {
        // 在webpack2中，此处需要使用绝对路径
        // path.resolve 是Node中转绝对路径的函数
        path: path.resolove(__dirname, './dist'),
        // 此处是配置文件名，因为我们想最后生成的js和index分开来存放，所以这里要把js单独放置在js文件夹下
        filename: 'js/bundle.js'
    }
}

此时，我们在根目录里新建一个 main.js 文件。

ES6 模块风格
import js from './src/components/header/header';

or:

CMD 模块风格
require('./src/components/header/header')

此刻我们在’./src/components/header/header’ 中创建header.js文件

alert(1);

现在，打开我们命令行工具:

webpack

OK了！~

这远远不符合我们的工作需求，我们一般都是在根目录有一个index.html，我们通常希望生成的index.html能和根目录中index.html建立联系。我们上线的时候，通常希望文件名是一个[hash].js。因为我们迭代的时候我们不希望客户端使用缓存文件，那么生成的js文件的名字是不固定的，那我们上个例子中直接在index中引用固定名字的方法是行不通的。

3， html-webpack-plugin

npm install html-webpack-plugin -S

webpack.config.js

const path = require('path');
const htmlWebapckPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'js/[hash].js'
    },
    plugins: [
        new htmlWebapckPlugin({
            title: '别淘气',
            template: 'index.html'
        })
    ]
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
    <p>This is a template!</p>
</body>
</html>

执行webpack后，在dist中生成带hash的js文件，并且index.html自动引用生成的js文件，并且带的有我们在webpack.config.js配置的title，以及使用了根目录index.html的模板。

4，以上只是打包js文件，通常开发还有css，images文件，甚至是less，scss文件，并且我们还想能够使用postcss来给我们自动添加浏览器私有前缀，并且我想用ES6来开发，这些需求如何来实现呢？

以下用less来配置：

npm i less-loader css-loader style-loader postcss-loader autoprefixer baberl-core babel-loader babel-preset-2015 -S

const path = require('path');
const htmlWebapckPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'js/[hash].js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: '/node_modules/',
                loader: 'babel-loader',
                options: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader']
            },
            {
                test: /\.less/,
                use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
            }
        ]
    },
    plugins: [
        new htmlWebapckPlugin({
            title: '别淘气',
            template: 'index.html'
        })
    ]
}

另外，因为需要使用postcss，所以我们需要在根目录设置一个postcss.config.js文件。

module.exports = {
    plugins: [
        require('autoprefixer')({
            browsers: ['last 5 versions']
        })
    ]
}

这样，就可以满足之前我们所说的ES6+less+postcss。

5，前端开发还经常有实时刷新的需求，在gulp中是比较容易实现的，直接用browser-sync就可以了。

在webpack中，我们需要webpack-der-server和raw-loader来结合使用达到我们的需求。

npm i webpack-dev-server raw-loader -S

因为，webpack-dev-server只能监听我们的js，css文件，less文件，不能监听html文件。所以需要raw-loader来监听我们的html文件。

在package.json文件中，配置脚本

"script": {
    "hot": "webpack-dev-server --hot --inline"
}

这样，在命令行中输入： npm run hot 就可以开启服务器，打开localhost:8080 即可完成热更新，但是改变html文件，并不会实时刷新页面。

所以我们需要使用raw-loader加载器。
在webpack.config.js中，配置html

{
    "test": /\.html$/,
    use: ['use-loader']
}

另外，在入口文件 main.js 中引入 index.html 即可。

再输入： npm run hot 试试吧。

qq_35534823

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack2的配置

什么是webpack？按我现在的理解，webpack是一个静态资源打包工具。把js，css，less，scss，图片等资源压缩合并，然后打包成上线版本。如何在自己项目中使用webpack2？1，安装webpacknpm install webpack -S2，配置webpack.config.js文件先来个简单的配置：// webpack和Node一样，都是遵循common.js 所以这里是r
复制链接

扫一扫