美文网首页
【webpack】从零开始建项目和打包配置

【webpack】从零开始建项目和打包配置

作者: haha2333 | 来源:发表于2019-12-29 16:50 被阅读0次

    从零开始建项目和打包配置
    1.npm install yarn -g
    yarn是什么
    2yarn init -y初始化项目

    其实就是新建了package.json文件,以后项目安装的依赖都会记录到这个文件

    3.安装webpack,webpack-cli
    yarn add webpack webpack-cli -D

    4.新建一个src目录,src里存放我们的项目文件

    在src目录下新建一个index.js,index.html写上一些内容
    (index.js是打包入口,index.html是打包模板)

    5.新建webpack.config.js文件,这就是我们的webpack配置文件了

    为什么是新建这个文件名?
    因为在node_module/webpack-cli/bin/config/config-yargs.js文件中module.exports模块options选项,config对象中的defaultDescription属性已经规定了配置文件的名称

    文件结构


    图片.png

    6.webpack配置
    我们之前已经知道webpack只能打包js文件,对于其他css,html文件就需要使用loader或者plugin进行处理

    重点:loader的执行是从下到上,从右到左的

    这里先说基本配置

    let path = require('path')
    module.exports = {
      entry: './src/index.js',  // 打包入口文件
      output: {
        filename: 'bundle.js', // 打包成bundle.js文件
        path: path.resolve(__dirname, 'build'), 
        // path属性必须是绝对路径
        // 打包后放在config文件同级的build文件夹下
      },
      // 使用plugin配置
      plugins: [
      ],
      // 使用loader配置
       module: {
          rules: [
           ]
        }
    }
    

    新建一个index.css文件,里面写样式。然后在在index.js文件中引入

    import './index.css'
    

    这样打包出来的样式是写在了js文件里面的
    打包成一个独立的css文件

    如何使用loader?

    以css-loader为例(打包css文件)
    安装:yarn add css-loader -D
    使用:

    {
       test: /\.css$/,
       loader: 'css-loader'
    }
    
    如何使用plugin?

    以html-webpack-plugin为例(自动把打包的js文件挂到html上)
    安装:yarn add html-webpack-plugin -D
    引入:let HtmlWebpackPlugin = require('html-webpack-plugin')
    使用:在plugins数组中,new一个插件的实例

    new HtmlWebpackPlugin({
          template: './src/index.html', // 就是刚刚的新建的index.html为模板
          filename: 'index.html',  //打包后生成index.html文件
          // 压缩代码
          minify: {
            removeAttributeQuotes: true, //删掉双引号
            collapseWhitespace: true,//删除空格、换行
          },
          hash: true //把html文件里引入的js文件路径加密
        }),
    

    每个插件都有不同的属性,具体可以百度一下进行配置

    7.打包
    有两个选择
    npx webpack:这个命令含义就是,运行webpack,如果webpack没有安装就会安装webpack
    ② 配置打包命令
    在package.json文件中,配置script字段

    "scripts": {
        "build": "webpack --config webpack.config.js",
      },
    

    含义:按照webpack.config.js文件配置进行打包
    所以你想要按照其他文件进行打包时,在cmd输入这个命令webpack --config webpack.config.js,把config后面的文件名换掉

    打包效果


    image.png

    运行index.html可以看到script文件的一下效果


    图片.png

    简单的打包就做好了

    相关文章

      网友评论

          本文标题:【webpack】从零开始建项目和打包配置

          本文链接:https://www.haomeiwen.com/subject/itryoctx.html