webpack+javascript搭建项目环境大概流程和各个流程的功能作用

前言

本文是对项目开发中webpack+原生js搭建流程的步骤梳理,和常见配置项的功能讲解.并不适用于vue/react框架

因为实际项目上的配置代码过多,放在一章写太长了,怕看不下去,所以实际代码另写在这里,两篇文章可以搭配看:https://www.cnblogs.com/liuXiaoDi/p/12245421.html

webpcak里配置的路径都建议使用path绝对路径

初始化

   1.创建文件夹

   2.npm init  -y,执行这句话的目的是生成package.json文件

安装webpack 和webpack-cli

    1.yarn add webpack webpack-cli@3.3.10 -D

     (这里指定webpack-cli版本是因为,webpack-cli最新的版本是4.xx测试版,和我的webpack-dev-server发生了冲突,导致dev-sever启动不起来),如果你在项目中出现了dev-server的问题,可以试着降低一下webpcak-cli的版本

创建config文件夹做开发环境和生产环境的配置

webpack的规则设置在webpack.config.js文件中.

但是!!!实际开发中,产品有多个环境比如开发环境/测试环境/线上环境,每个环境的配置规则都不同.显然只靠webpack.config.js这一个文件不能满足我们的需求,我们需要拆分webpack.config.js

通常webpack.config.js拆分为3个文件:

   1.base.config.js

   2.dev.config.js

   3.pro.config.js

webpack基本配置项

entry

作用指明webpack打包时,使用那个模块作为构建依赖图的起点.webpack进入起点后会找出直接和间接的依赖,每个依赖随即被处理最终输入到bundle文件中

entry中的模块路径最好是绝对路径,entry常见两种配置:

　　单页应用(常见):

const config = {
  entry: path.join(__dirname,'../src/main.js')
};

 　　多页应用:如下告诉 webpack 需要 2 个独立分离的依赖图.多页应用在每次页面跳转时都会去获取新的html页面和重新下载相关资源

const config = {

  entry: {

    pageOne: path.join(__dirname,'./src/pageOne/index.js'),

    pageTwo:path.join(__dirname,'./src/pageTwo/index.js')

　　} 
};

output

作用是设置webpack如何向硬盘输出编译后的文件.注意即使是多页面应用页也只能指定一个输出配置,多页应用的时候为了保证每个输出的文件名具有唯一性,要使用占位符

output属性最基本设置要包含filename和path

多入口entry对应的output

const config = {

  entry: {

    app: './src/app.js',

    search: './src/search.js'

  },

  output: {

    filename: '[name].js',

    path: __dirname + '/dist'

  }// 写入到硬盘：./dist/app.js, ./dist/search.js

 };
 module.exports = config;

单入口entry对应的output

const config = {

  output: {

    filename: 'bundle.js',

    path: '/home/proj/public/assets'

  }

};


module.exports = config;

mode

模式,webpack提供2中模式,每种模式对应不同的内置优化:development是开发环境,production是生产环境

module.exports = {

    mode: 'development'

}

module

module.rules

规则数组,成员是对象,每个对象用于对特定的文件配置相关loader处理.对象内的常用规则如下:

• test值是匹配规则,针对符合规则的文件进行处理
• include值是路径,路径内的文件一定会使用loader处理
• exclude值是路径,路径内的文件一定不会使用loader处理
• use指定使用的loader和loader相关配置项,use的规则在下面会具体说明

use规则

use可以是字符串

use可以是数组,当为数组时,内部成员可以是字符串也可以是对象,内部成员是对象时,有loader和options字段.loader指定我们需要的loader名称,options是对使用的loader的配置

module.rules的例子

 module: {
        rules: [
            {
                test: /.js$/,
                loader: "babel-loader",
                exclude: path.join(__dirname, "../node_modules")
            },
            {
                //引入非模块化的插件
                test: require.resolve('zepto'),
                //转化成模块的方式
                loader: 'exports-loader?window.Zepto!script-loader'
            },
            {
                test: /.(png|jpg|gif|svg)$/,
                use: {
                    loader: "url-loader",
                    options: {
//options内部是对url-loader的配置
                        limit: 2048,
                        name: "img/[name].[ext]"
                    }
                },
                exclude: path.join(__dirname, "../node_modules")
            },
    ]
}

resolve

resolve用于设置模块如何被解析,通常我们使用webpcak的默认解析配置.对于解析方式我们常用的只有路径别名配置

resolve.alias

 resolve用于路径别名的配置,相当于给不同的路径起简称,使用如下

 resolve: {
        //别名的配置,相当于给不同的路径起简称
        alias: {
            "@": path.join(__dirname, "../src"),
            "view": path.join(__dirname, "../src/view"),
            "controller": path.join(__dirname, "../src/controller"),
            "lib": path.join(__dirname, "../src/lib"),
            "router": path.join(__dirname, "../src/router"),
            "styles": path.join(__dirname, "../src/styles"),
            "api":path.join(__dirname,"../src/api"),
            "model":path.join(__dirname,"../src/model"),
            "utils":path.join(__dirname,"../src/utils")
        }
    },
//在配置文件中配置完成后,我们在具体的js文件中使用
未配置前使用:import Header from '../../../src/component/header'
配置完成后使用:import Header from '@/component/header';
@就等于src的绝对路径

    - plugins

    - 

 

六.plugins常用的插件

    这几个插件用于包的配置

    html-webpack-plugin

    clean-webpack-plugin

    copy-webpack-plugin

     extract-text-webpack-plugin

     下载以上这些

     yarn add html-webpack-plugin clean-webpack-plugin copy-webpack-plugin extract-text-webpack-plugin@next -D

七.常用loader

用于对模块的源代码进行转化,loader可以使你在import或者加载模块时预处理文件,类似于其他构建任务的task,比如可以将es6转化为es5,

     处理js的loader

        babel-loader

        @babel/core

        @babel/preset-env

        yarn add babel-loader @babel/core @babel/preset-env -D

        根目录下创建.babelrc文件,在该文件内做babel相关loader的配置

     处理图片的loader

        url-loader

        file-loader

yarn add url-loader file-loader -D

    处理css的laoder

     style-loader:把.css文件以<style>形式引入到html中(传统方式以<link>形式在html中引入css)

     css-loader:加载.css文件

     node-sass:处理sass

     postcss-loader

     atutoprefixer

     yarn add 以上这些

     yarn add style-loader css-loader sass-loader postcss-loader autoprefixer -D

   

      处理vue单文件组件(如果做vue项目的化,看这里)

        vue-loader

        vue-template-compiler

        yarn add vue-loader vue-template-compiler -D

八.合并webpack配置项

yarn add webpack-merge -D

 

九.webpack服务

yarn add webpack-dev-server -D