前端构建工具 -- Webpack

2024年1月26日 204次阅读 来源: yichair

前言

scss（sass）、less是css的预处理语言，采用其可以得到更规范，更清晰的css代码，typescript是javascript基础上扩展的代码，使我们能使用javascript不能使用的特性，并且可以转换为js代码

但这些语言编写的代码都需进行处理才能变成浏览器能识别的代码，手动处理又太过繁琐，所以使用webpack等自动打包工具就比较方便

1、简介

Webpack : 是前端打包工具，它从主文件（如index.html）开始，检查其依赖的模块文件，并将其中JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等）进行转换和打包成为一个（或多个）js文件
Grunt/Guip : 优化前端开发流程的工具，在一个配置文件中设置指定文件的编译，组合，压缩等任务的具体步骤，工具自动完成该任务

2、安装Webpack

使用npm安装webpack模块，在webpack 3中，webpack本身和它的CLI以前都是在同一个包中，但在第4版中，他们已经将两者分开来更好地管理它们,所以在webpack 4中需要先全局安装webpack和webpack-cli。
使用npm安装webpack模块:

npm install -g webpack
npmt install -g webpack-cli

3、使用webpack打包项目入门

1、使用终端用webpack打包简单文件
webpack 4不能使用webpack 入口文件 出个文件 进行打包了，它的打包方式为默认入口文件是src目录下的Index.js文件，目的文件是dist目录下的main.js文件，打包命令行是,执行该命令行之后就能在dist目录下出现打包完成的文件main.js

webpack --mode development

2、使用webpack打包复杂项目
首先新建一个文件夹webpack-demo,其下有文件夹css和js,css文件夹里有
创建package.json : npm install
安装依赖包：

npm install webpack --save-dev
npm install jquery --save-dev
npm install style-loader css-loader --save-dev 
npm install extract-text-webpack-plugin –-save-dev

新建一个webpack.config.js文件进行打包配置：

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    entry:'./js/main.js',
    output: {
        path: '/dist',
        filename: 'bundle.js'
    },

    plugins: [
        new ExtractTextPlugin ('./style.css')
    ],

    module: {
        rules: [
            {
                test: /\.css$/,
                loader:ExtractTextPlugin.extract("style-loader","css-loader")
            }
        ]
    }
};

注：在webpack v2 之后loaders都用rules替代了
使用webpack进行打包webpack
注：如果运行提示 command not found可以这么操作node_modules/.bin/webpack
自定义shell命令来操作的。$ alias lwebpack="node_modules/.bin/webpack"

我们需要在js文件里，通过require的方式来引入css，我们来看具体的方法，首先需要安装css-loader，
style-loader(安装style-loader的目的是为了在html中以style的方式嵌入css)

    原文作者：yichair
    原文地址: https://segmentfault.com/a/1190000014635989
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞