自己动脚搭建webpack环境

Posted 2021-04-29 Spade75前端随笔

• 恍恍惚惚迈出了第一步,  公司很小, 但是我还比较喜欢(直觉). 

• 至于路, 我早都打算好了.  至于钱, 我的心很大. 我能忍. : - )

• 果然, 各种宏伟计划在家里都要打个3折

---

正文 :

1.全局安装webpack

npm install -g webpack

2.建立两个文件夹 app 和  public

    App内存放原始数据 和 js模块 ,  

    public里存放供浏览器读取的数据, 包括webpack打包的文件和一个index.html

3.使用webpack打包

node_modules/.bin/webpack app/main.js public/bundle.js

webpack 入口文件 出口文件

通过配置文件配置webpack

1.     新建一个webpack.config.js文件

2.     主要内容是入口文件和出口文件

module.exports = { 

    entry: __dirname + "/app/main.js",//唯一入口文件 

    output: { 

        path: __dirname + "/public",//打包后的文件存放的地方 ,__dirname 是nodejs的一个全局变量, 表示当前执行脚本所在的目录. 

        filename: "bundle.js"//打包后输出文件的文件名 

    } 

}

配置完成后可以直接使用命令  webpack  来执行打包命令

使用npm引导命令

在package.json中:

{

  “name”: “spadek”,

  “arthor”: “spadek”,  

  “scripts":{

    “start”: “webpack"

}

start  是个特殊的命令 , 执行npm start 时, 会执行之后的命令, 如果不是start, 要写成npm run xxx  比如: npm run dev

Webpack的一些主要功能:

1.生成source Maps

source Maps会方便调试. 生成一个映射.  [你出错的位置 对应 你代码的位置]

• cheap-module-source-map  不带列, 只带行,  即出错的时候, 只显示你的代码出错在第几行

• eval-source-map  只能在开发阶段使用, 对打包后的js文件有安全和性能的隐患

• cheap-module-eval-source-map 缺点和2一样, 不带列, 打包时生成source-map最快

  
  

2.devServer

• 让浏览器监听你的代码,  并且在作出修改后自动刷新

{

    "devServer": {

        “contentBase”: “./pulic",//默认会为根文件夹提供本地服务器. 如果想为另一个目录下的文件提供本地服务. 在这里设置目录

        “historyApiFallback”: true, //不跳转 , 写成false, 即所有跳转到index.html

        “inline”: true, //自动刷新

        “post”: 8080 //默认监听8080, 不写

    }

}

• 在package.json中配置命令.  npm run server 开启服务

{

    “scripts”: {

        “server”: “webpack-dev-server —-open"

    }

}

3.Loaders

• 用处: 处理文件 , 转换文件

• loaders需要单独安装, 并且在webpack.config.js中modules关键字下进行配置

    

test	一个用以匹配loaders处理的文件的扩展名的正则表达式 *必需
loader	loader的名字
include/exclude	手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）
query	为loader提供额外的配置

4.Babel的配置 (不属于webpack)

解析es6的包: babel-preset-es2015 (貌似最新版本此包已经被babel一个包合并了)

解析jsx语法: babel-preset-react

module: { 

    rules: [ 

        { 

            test: /(\.jsx|\.js)$/, 

            use: { 

                loader: "babel-loader”, 

                options: { 

                    presets: [ "es2015", "react" ] 

                } 

            }, 

            exclude: /node_modules/ 

        } 

    ] 

}

//直接写   见下文 .babelrc

module: {

    rules: [

        {

            Test : /xxx.js$/,

            Loader: vue-loader,

            exclude: “/node_modules"    

            Options: {

                Name: “xxx”,   

                limit: 1000   

            }    

        }

    ]

}

• 为了避免太过复杂, 一般分开配置, 在.babelrc 文件中配置

{

    “presets” : [ “es2015”, “react” ]

}

5.插件plugins

• plugins用来扩展webpack的功能, 在构建过程中生效.   loaders和plugins不同. loaders用来处理单一源文件, 而plugins对整个构建过程起作用

• 举例

var webpack = require('webpack’);

module.exports = {

    module: {

    

    },

    plugins: [

        new webpack.BannerPlugin(‘版权所有, 伪冒必究’), //打包后的js中会出现 /*!版权所有, 仿冒必究*/

        new HtmlWebpackPlugin({

            template: __dirname + “/app/index.html"

        }),

        //htmlWebpackPlugin插件, 可以根据一个index.html模板, 生成一个新的引入了你打包之后的js文件的index.html

        new webpack.HotModuleReplacementPlugin() //热加载插件 实现自动刷新

    ]

}

• 插件 Hot Module Replacement 

• 可以实现保存修改后自动刷新页面.

• 在webpack中实现HMR需要做两项配置( 配完了也不能使用, 还得配合别的,比如说react-transform-hrm) 

        1.在webpack配置文件中添加HMR插件；

        2.在Webpack Dev Server中添加“hot”参数； devServer : { hot : true } 

以上大概是开发阶段的配置,产品阶段自己百度吧.

ps:  排版是真的丑.  有什么写出来就是漂漂亮亮的排版软件吗?